• 函数防抖和函数节流都是防止某一时间频繁触发

防抖(debounce)

• 当一个事件被触发多次时，防抖可以限制这些触发，并在最后一次调用时执行该事件。例如，当用户在百度搜索栏中输入字符时，每次输入都会触发搜索操作。假设我们使用防抖将搜索操作延迟到输入完成后执行，可以提高性能和响应速度，又如进电梯，当一个人进去后，电梯门并不会立马关闭，等待（5s）一段时间才会关闭，当即将关闭前1秒，又有一个人进来，那么电梯门关闭则会延长5秒,以此往复...

• 防抖的实现原理很简单，当一个事件被触发时，它将等待一段时间（例如500ms）并检查事件是否被再次触发。如果是，则等待时间从头开始。如果没有，则执行事件。

function debounce(func, delay) { 
    let timer; 
    return function() { 
        let context = this;
        let args = arguments;
        clearTimeout(timer); 
        timer = setTimeout(function() { 
            func.apply(context, args);
        }, delay);
    } 
 }
 
function handle(){ 
    console.log('窗口改变了')
} 

window.addEventListener("resize",debounce(handle,1000));

节流(throttle)

• 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

function throttle(func,wait){
    let pre = Date.now();
    return function(){
        let context = this;
        let args = arguments;
        let now = Date.now(); 
        if( now - pre >= wait){
            func.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log('鼠标移动了');
}
    
window.addEventListener("mousemove",throttle(handle,1000));

防抖和节流的区别

• 降低回调执行频率，节省计算资源
• 函数防抖是某一段时间内只执行一次
• 函数节流是间隔时间执行

本文完~如有不足之处，可在评论区留言哦