JavaScript防抖和节流多种实现

防抖(debounce)

触发高配事件 n 秒内只触发一次，如果 n 秒内再次被触发，则重新计算时间

• 手写

function debounce(fn, wait) {
  let timer;
  return function () {
    let _this = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(_this, args);
    }, wait);
  };
}

节流(throttle)

高频事件触发，但在 n 秒只触发一次

使用时间戳实现

function throttle(fn, wait) {
  let time = 0;
  return function () {
    let _this = this;
    let args = arguments;
    let now = Date.now();
    if (now - time > wait) {
      fn.apply(_this, args);
    }
  };
}

使用定时器

function thorttle(fn, wait) {
  let timer;
  return function () {
    let _this = this;
    let args = arguments;

    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn.apply(_this, args);
      }, wait);
    }
  };
}

此外处了手写之外，我们还可以对利用第三方工具库，lodash（全量加载）、lodash-es（按需加载）里面调用防抖和节流~