本文共 1225 字，大约阅读时间需要 4 分钟。

类似于输入框联想、监听滚动这种会频繁触发的事件，我们实际上是不需要它们每次都触发的，如果每次都触发会给浏览器造成沉重的负担，防抖和节流就是用来限制这些事件的触发频率的。

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

例子：如果有人进电梯，那电梯将在10秒钟后出发，这时如果又有人进电梯了，我们又得等10秒再出发。

思路：通过闭包维护一个变量，此变量代表是否已经开始计时，如果已经开始计时则清空之前的计时器，重新开始计时。

function debounce(fn, wait) {    // 使用闭包保存持久变量    var timeout = null;    return function() {        if(timeout !== null)                 // 如果持续触发，就把前面的定时器取消掉，这样来保证只有不触发事件时才开始计时                clearTimeout(timeout);        timeout = setTimeout(fn, wait);    }}// 处理函数function handle() {    console.log(Math.random()); }// 滚动事件window.addEventListener('scroll', debounce(handle, 1000));

节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

例子：游戏内的技能冷却，无论你按多少次，技能只能在冷却好了之后才能再次触发

思路：通过闭包维护一个变量，此变量代表是否允许执行函数，如果允许则执行函数并且把该变量修改为不允许，并使用定时器在规定时间后恢复该变量。

const throttle = function (func, delay) {  var timer = null;  return function () {    var context = this;    var args = arguments;    if (!timer) {      timer = setTimeout(function () {        func.apply(context, args);        timer = null;      }, delay);    }  }}function handle() {  console.log(Math.random());}window.addEventListener('scroll', throttle(handle, 1000));

很多同学都知道防抖和节流，但是这两种技术的具体区别却不太清楚，简单来说就是：函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

转载地址：http://vavii.baihongyu.com/