防抖与节流

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

使用场景：点击按钮调用接口、监听输入框change事件等。

const debounce = function (fn, wait) {
  let timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, wait)
  }
}

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

使用场景：页面滚动的回调事件等。

function throttle(fn, wait) {
  let canRun = true;
  return function () {
    if (!canRun) return
    canRun = false
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, wait);
  };
}