关于前端:深入理解JavaScript防抖与节流

防抖和节流都是闭包的利用，先了解闭包，再了解防抖和节流

先不说概念，按本人的了解，在单反里，有防抖机制。因为人在拿着单反的时候会手抖（单反重），按下快门的霎时，照片会糊，所以有防抖机制，以避免老手把照片拍糊

单反中的防抖是避免抖动，让人拍出清晰的照片，JavaScript 中的防抖是为了什么？

同理，它的作用也是避免抖动。试想当你频繁触发一个事件时，就会引起不必要的性能损失，那么让该事件在进行触发后再触发，以此缩小局部性能

防抖就是要提早执行，你始终操作触发事件始终不执行，当你进行操作期待多少秒后才执行

也就是说不论事件触发频率有多高，肯定在事件触发 n 秒后执行。如果在事件触发的 n 秒又触发了这个事件，那就以新事件的事件为准，n 秒后才执行。总之，要等你触发完事件 n 秒内不再触发事件，它才执行

依据定义，咱们晓得要在工夫 n 秒后执行，那么咱们就用定时器来实现

function debounce(event, wait) {
  let timer = null;
  return function (...args) {clearTimeout(timer); // 革除 setTimeout，使其回调函数不执行
    timer = setTimeout(() => {event.apply(this, args);
    }, wait);
  };
}

代码很简略，即当还在触发事件时，就革除 timer，使其在 n 秒后执行，但此写法首次不会立刻执行，为其健壮性，需加上判断是否第一次执行的第三个参数 flag，判断其是否立刻执行

function debounce(event, wait, flag) {
  let timer = null;
  return function (...args) {clearTimeout(timer);
    if (!timer && flag) {event.apply(this, args);
    } else {timer = setTimeout(() => {event.apply(this, args);
      }, wait);
    }
  };
}

window.addEventListener('resize', debounce(handleResize, 200));

debounce(fetchSelectData, 300);

debounce(validator, 1000);

两大工具库都有防抖源码，可供参考

lodash-debounce

underscore-debounce

顾名思义，一节一节的流，就好似管制水阀，在事件一直触发的过程中，固定工夫内执行一次事件

因为是固定工夫内执行一次工夫，所以咱们有两种实现办法，一用工夫戳，二用定时器

function throttle(event, wait) {
  let pre = 0;
  return function (...args) {if (new Date() - pre > wait) {
      // 当 n 秒内不反复执行
      pre = new Date();
      event.apply(this, args);
    }
  };
}

应用工夫戳尽管能实现节流，然而最初一次事件不会执行

function throttle(event, wait) {
  let timer = null;
  return function (...args) {if (!timer) {timer = setTimeout(() => {
        timer = null;
        event.apply(this, args);
      }, wait);
    }
  };
}

应用定时器实现节流，尽管最初一次能触发，然而第一次不会触发

为解决第一次和最初一次都能够触发，把两者联合起来

function throttle(event, wait) {
  let pre = 0,
    timer = null;
  return function (...args) {if (new Date() - pre > wait) {clearTimeout(timer);
      timer = null;
      pre = new Date();
      event.apply(this, args);
    } else {timer = setTimeout(() => {event.apply(this, args);
      }, wait);
    }
  };
}

window.addEventListener('scroll', throttle(handleScroll, 200));

throttle(fetchInput, 300);

lodash-throttle

underscore-throttle

防抖：只执行最初一次。事件继续触发，但只有等事件进行触发后 n 秒后才执行函数

节流：管制执行频率。继续触发，每 n 秒执行一次函数

比照图：

线上 demo（司徒正美的 demo）：防抖节流

awesome-coding-js
防抖节流场景及利用
函数防抖与函数节流

深刻了解 JavaScript——开篇
深刻了解 JavaScript——JavaScript 是什么
深刻了解 JavaScript——JavaScript 由什么组成
深刻了解 JavaScript——所有皆对象
深刻了解 JavaScript——Object（对象）
深刻了解 JavaScript——new 做了什么
深刻了解 JavaScript——Object.create
深刻了解 JavaScript——拷贝的机密
深刻了解 JavaScript——原型
深刻了解 JavaScript——继承
深刻了解 JavaScript——JavaScript 中的始皇
深刻了解 JavaScript——instanceof——找祖籍
深刻了解 JavaScript——Function
深刻了解 JavaScript——作用域
深刻了解 JavaScript——this 关键字
深刻了解 JavaScript——call、apply、bind 三大将
深刻了解 JavaScript——立刻执行函数（IIFE）
深刻了解 JavaScript——词法环境
深刻了解 JavaScript——执行上下文与调用栈
深刻了解 JavaScript——作用域 VS 执行上下文
深刻了解 JavaScript——闭包

关于前端:深入理解JavaScript防抖与节流

防抖（debounce）

防抖的定义

手写防抖

防抖场景

窗口大小变动，调整款式

搜寻框，输出后 1000 毫秒搜寻

表单验证，输出 1000 毫秒后验证

防抖帝王库

节流（throttle）

手写节流

工夫戳

定时器

工夫戳 + 定时器

节流场景

scroll 滚动

input 动静搜寻

节流帝王库

总结

参考资料

系列文章