防抖和节流的区别

• 防抖指函数防抖（debounce）：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

// 防抖
function debounce(fn, time) {    
    let timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, time);    
    }
}
// 处理函数
function handle() {    
    console.log(`啦啦啦....`); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

• 节流指函数节流(throttle)：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

// 节流throttle代码（定时器）：
function throttle(fn, time) {            
    let canRun = true;            
    return function() {                
        if(!canRun) return;
        canRun = false;             
        setTimeout(() =>{
           fn.apply(this, arguments);
           canRun = true; 
        },time)          
    }        
}        
function handle() {            
    console.log(`啦啦啦....`);        
}        
window.addEventListener('scroll', throttle(handle, 1000));

应用场景

• 防抖

1. 搜索联想，用户在不断输入值时，用防抖来节约请求资源
2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

• 节流

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断