防抖和节流

基本关系

防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同

• 防抖（debounce），简单的说，当一个动作连续触发，则只执行最后一次

• 节流（throttle），限制一个函数在一定时间内只能执行一次 防抖常用场景

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求

• 窗口大小拖拽 Resize

函数节流常用场景

• 滚动加载，加载更多或滚到底部监听

相同点

• 都可以通过使用 setTimeout 实现
• 在lodash中提供了debounce() 、throttle()方法
• 都是降低回调执行频率。节省计算资源

不同点

防抖是，让方法合并执行 节流，让方法均匀执行

防抖的简单实现

const _.debounce = (func, wait) => {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
};

函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。说明，防抖是，让方法合并执行。

函数节流的 setTimeout 版简单实现

const _.throttle = (func, wait) => {
  let timer;
  return () => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      func();
      timer = null;
    }, wait);
  };
14
};

函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。说明，节流是，让方法均匀执行