防抖动和节流 - 翁先森的博客

场景：

在页面中很多的事件是会频繁执行的、如：

window的resize，scroll事件
拖拽过程中的 mousemove事件
文字输入过程中的keyup等事件

这些事件一旦触发会频繁执行、但是实际上我们可能只需要在特定的时候去执行绑定了这些事件的函数

例如：我需要检测一次拖拉浏览器，移动过程中都算是一次，知道最后鼠标抬起来了，才算是完成了一次拉伸窗口；有比如，我们输入搜索框内的文字的时候，需要发ajax 到后台去请求数据，实际上我们并不需要每一次的输入都发送一个请求，而是在用户已经输完了一整段话或者是几个文字之后再去发送一个ajax，这样会节省很多的资源开销。等等的这些问题都需要函数防抖动或者函数节流来解决

防抖（debounce）#

原理：当我们调用一个动作的时候，会设置在n毫秒后才执行，而在这n毫秒内，如果这个动作再次被调用的话则将重新在计算n毫秒，采取执行这个东西。

当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后再也没有事件发生，就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。

例如：

1
<body>
2
  <style>
3
    #container {
4
      width: 200px;
5
      height: 300px;
6
      background-color: aquamarine;
7
    }
8
  </style>
9
  <div id="container">
10

11
  </div>
12
  <script>
13
    var count = 1;
14
    var containerDom = document.getElementById('container');
15
    function addNumber() {
16
      containerDom.innerHTML = count++;
17
    }
18
    containerDom.onmousemove = addNumber;
19

20
  </script>
21
</body>

鼠标只要移动那么就会频繁的去触发addNumber的函数

debounce

这个时候我们对他进行防抖动

先写我们的第一版函数

1
function debounce(fun, wait) {
2
  var time;
3
  return function () {
4
    clearTimeout(time);
5
    time = setTimeout(fun, wait);
6
  }
7
}

之后包裹住这个addnumber的函数

现在随你怎么移动，反正你移动完 1000ms 内不再触发，我才执行事件。看看使用效果：

debounce 第一版

顿时就从 165 次降低成了 1 次!

之后我们对他优化

this指向优化#

如果我们再addNumber函数中加入console.log(this)，没有再addNumber外层包裹debounce的时候this指向是

1
<div id="container"></div>

但是包裹了debounce之后this就会指向windows对象

所以需要对它进行修改

1
var count = 0;
2
var containerDom = document.getElementById('container');
3
function addNumber() {
4
  containerDom.innerHTML = `<div>
5
  值为${++count}
6
  </div>`;
7
  console.log(this);
8
}
9
function debounce(fun, wait) {
10
  var time;
11
  return function () {
12
    var that = this;
13
    clearTimeout(time);
14
    time = setTimeout(fun.bind(that), wait);
15
  }
16
}
17
containerDom.onmousemove = debounce(addNumber, 1000);

但是这里又有一个问题，就是这样包裹debounce的时候，onmousemove自带的事件对象event就会丢失，没有将参数传进去，故我们需要修改一哈，这样再我们需要用到event对象的时候就能拿得到

1
var count = 0;
2
var containerDom = document.getElementById('container');
3
function addNumber(e) {
4
  containerDom.innerHTML = `<div>
5
  值为${++count}
6
  </div>`;
7
  console.log(this);
8
  console.log(e);
9
}
10
function debounce(fun, wait) {
11
  var time;
12
  return function () {
13
    var that = this, args = arguments;
14
    clearTimeout(time);
15
    time = setTimeout(fn.bind(that, ...args), wait);
16
  }
17
}
18
containerDom.onmousemove = debounce(addNumber, 1000);

这个时候我们函数就非常的完善了。

第一次立刻执行#

假设我需要立即触发这个函数，但是又想防抖，就是相当于先执行函数再N秒内如果再此触发这个函数，就给他重新计算等待值。

1
function debounce(fun, wait, immediate) {
2
  var time;
3
  return function () {
4
    var that = this, args = arguments;
5
    if (time) clearTimeout(time);
6
    if (immediate) {
7
      // 如果已经执行过，不再执行
8
      var callNow = !time;
9
      time = setTimeout(function () {
10
        time = null
11
      }, wait);
12
      if (callNow) fun.apply(that, args);
13
    } else {
14
      time = setTimeout(function () {
15
        fun.apply(that, args);
16
      }, wait);
17
    }
18
  }
19
}

[Image missing: debounce 第四版]

完~

节流#

可以理解为事件在一个管道中传输，加上这个节流阀以后，事件的流速就会减慢。实际上这个函数的作用就是如此，它可以将一个函数的调用频率限制在一定阈值内，例如 1s，那么 1s 内这个函数一定不会被调用两次

以下是一个简版的节流,这里的this和argument处理方式和上面的防抖是一样的处理方式

1
function throttle(fn, wait) {
2
  let prev = new Date();
3
  return function() {
4
      const args = arguments;
5
    const now = new Date();
6
    if (now - prev > wait) {
7
      fn.apply(this, args);
8
      prev = new Date();
9
    }
10
  }
11
}

按照以上的实现，第一次进入的时候就立马执行事件，但是如果最后一次的时间和pre的时间插值小于我们的wait时间，这时候的函数是不执行的，但是我们想要让它执行，这时候加入定时器，让他在最后一次调用执行函数的时候，算出它距离wait的时间还剩多少，然后让他在剩余时间内再执行；

最终的代码是这样

1
function throttle(fn, wait) {
2
    let prev = new Date();
3
    let time;
4
    return function () {
5
      const args = arguments;
6
      const now = new Date();
7
      clearTimeout(time);
8
      if (now - prev >= wait) {
9
        fn.apply(this, args);
10
        prev = new Date();
11
      } else {
12
        time = setTimeout(fn.bind(this, args), wait - (prev - now));
13
      }
14
    };
15
}