JS 防抖与节流应用场景和最佳实践

防抖和节流的作用：

-   都是在高频事件中防止函数被多次调用，是一种性能优化的方案。

它们的区别在于：

-   防抖函数只会在高频事件结束后 n 毫秒调用一次函数
-   节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。

防抖函数：

触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。

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

节流函数：

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

function throttle(func, wait) {
  let timeout = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}