防抖 节流

说白了，防抖节流就是使用定时器来实现我们的目的。

防抖(debounce)：

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

典型的案例就是输入框搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，则重新计时。

节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。

典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只生效一次。

为什么要掌握防抖和节流

函数节流（throttle）与函数防抖（debounce）都是可以限制函数的执行频次，根据不同的场景来对执行频率进行限制，避免了函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

防抖

function debounce(fn, delay) {

  let timer = null;

  return function () {

    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {

      fn.apply(this, arguments);

    }, delay);

  }

}

节流

function throttle(fn, cycle) {

  let start = Date.now();

  let now;

  let timer;

  return function () {

    now = Date.now();

    clearTimeout(timer);

    if (now - start >= cycle) {

      fn.apply(this, arguments);

      start = now;

    } else {

      timer = setTimeout(() => {

        fn.apply(this, arguments);

      }, cycle);

    }

  }

}