防抖与节流

wzr

在开发过程中我们经常会绑定一些持续触发的事件，这些事件处理函数中的代码会被频繁执行，浏览器反应会明显变慢

为了解决这个问题，有了防抖与节流方案

**函数防抖：**将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。
函数节流：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。

函数防抖(`debounce`)

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

实现思路：

延迟debounce（非立即执行）

事件被触发时，设置一个周期延迟执行动作；若期间又被触发，则重新设定周期，直至周期结束，执行动作
前缘debounce（立即执行）

即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。

function renderCnt() {
  document.querySelector(".cnt").innerHTML = cnt++;
};

function debounce(func, wait) {
  let timeout;
  return function () {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  }
};

document.onmousemove = debounce(renderCnt, 200);

在这个过程发生了什么？

当页面鼠标开始有动作时，debounce函数里的匿名函数开始执行；鼠标每移动一点，就会触发一次匿名函数的执行；如果timeout存在值，就会将timeout清除。直到鼠标停止运动，匿名函数不执行。上一次设置的setTimeOut才会执行

防抖与节流

函数防抖(debounce)

函数防抖(`debounce`)