防抖和节流

总是分不太清楚防抖和节流或者看过之后一段时间后又忘掉，烦烦烦， 乏乏乏。

防抖

已有等待执行的任务，如果再次触发，将清除未执行完成的任务重新开始新的任务，相当于时间清零延迟时间。

使用场景：

1. 某些按钮的误操作重复点击触发多次事件
2. 例如查看一些重要安全隐私页面，用户无操作后一段时间自动隐藏or关闭
3. 监听屏幕调整大小去改变某些元素的样式，不用频繁操作dom

/** 
* 防抖 
* @param {function} fn 需要执行的函数 
* @param {number} awit 任务执行的等待时间 
* @return {function} 
*/ 
function debounce(fn, awit) { 
  var task; // 用于存储定时器id 
  return () => { 
    // 每次进来先重置（中断等待执行的任务），重新开始执行任务。 
    if (task) {
      window.clearTimeout(task); 
    }
    task = setTimeout(() => { 
      fn();
      window.clearTimeout(task); // 执行完进行清除
    }, awit) 
  } 
} 
// 使用方法：debounce(fn, awit)(); 
var debounceMethod = debounce(() => {console.log('9527')}, 3000); 
debounceMethod(); // 9527

节流

已有等待执行的任务，将不会再次触发，一段时间只能执行一次。

使用场景：

1. 轮询请求某些待办接口，已在执行将不再触发，达到节省请求的目的
2. 也可用于监听屏幕调整大小去改变某些元素的样式，不用频繁操作dom

/** 
* 节流 
* @param {function} fn 需要执行的函数 
* @param {number} awit 任务执行的等待时间 
* @return {function} 
*/ 
function throttle(fn, awit) { 
    var task; // 用于存储定时器id 
    // arguments 是非箭头函数内部的局部参数（类数组） 
    return (...arguments) => { 
        // 任务正在等待执行，无需重复执行 
        if(task) { 
            return false 
        } 
        task = setTimeout(() => { 
            fn(); 
            window.clearTimeout(task); 
            task = null; // 任务结束后必须清除，否则只能执行一遍 
        }, awit) 
    } 
} 

// 使用方法：throttle(fn, awit)(); 
var throttleMethod = debounce(() => {console.log('9528')}, 3000); 
throttleMethod(); // 9528

总结

防抖： 重在等待，任务多次触发将重新等待一段时间

节流： 重在控制频率严格执行，一段时间内任务只能触发一次 区别： 防抖多次执行只执行最后一次，节流多次执行只执行最后一次