防抖节流

节流和防抖

防抖和节流的背景

为了解决频繁操作造成的频繁事件触发 相当于进行一个优化，当输入完成的时候再触发事件回调，而不是只要数据变化就一直触发事件回调。

防抖

防抖的原理

原理（对比下面示例）：事件回调函数（doSomething）在一段时间（300毫秒）后才执行，如果在这段时间内再次调用则重新从0开始计算到300毫秒的时间，当预定的时间内没有再次调用该函数，则执行事件回调函数（doSomething）

理解:

// 示例1：
// _.debounce(事件回调函数, 间隔时间, [true立即调用/false]) 使用的是 underscore库
// 鼠标移动事件，只要鼠标一直动则会一直调用onmousemove函数，也就是_.debounce(doSomething, 300)；那么debounce也就会一直重新计算时间，如果移动时间间隔超过300毫秒，那么就执行doSomething回调函数
container.onmousemove = _.debounce(doSomething, 300);
复制代码

手写防抖

function myDebounce(fn, interval = 500) {
  let timeout = null;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}
function doSomething(){
    // onmousemove触发的事件回调函数
}
container.onmousemove = myDebounce(doSomething, 300);
复制代码

节流

节流原理

原理：单位时间内连续触发，但是只会执行一次，比如事件在300秒内不断触发点击事件，那么只会执行一次，到下一个300s开始计时的时候，就会在下一个300s内再执行一次；也就是说600s连续触发事件但是只会执行2次。（原理让我们知道需要一个标志位）

手写节流

function myThrottle(fn, interval = 500) {
  let run = true;
  return function () {
    if (!run) return;
    run = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      run = true;
    }, interval);
  };
}

function doSomething(){
    // onmousemove触发的事件回调函数
}
container.onmousemove = myThrottle(doSomething, 300);