一、防抖与节流是什么？

本质上两者都是前端的一种优化手段，也是前端开发中处理高频技术的关键。

如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率

定义

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

区别

为了更好的帮助理解两者，我觉得用电梯的例子就可以很好的区分。

• 节流（throttle）：就像电梯设定好每15秒运行一次，无论在这15秒内有多少人试图进入电梯，电梯只会运行一次。这确保了在指定的时间间隔内，函数最多执行一次，即使事件被触发多次。

• 防抖（debounce）：电梯等待15秒后才开始运送，但如果有新的人在等待期间进入电梯，15秒的计时就会重置。这意味着电梯会在最后一次有人进入后的15秒开始运送。这样可以确保在一系列连续的事件触发之后，函数仅在事件完全停止后的某个延迟时间内执行一次。

应用场景

这两种技术在不同的场景下有不同的应用，比如：

• 节流通常用于控制持续性的事件，例如滚动（scroll）、调整窗口大小（resize）等，这些事件可能因为用户的连续动作而频繁触发，通过节流可以保证处理不会过于密集，同时保持用户体验的平滑性。

• 防抖则常用于输入字段的搜索功能或者窗口大小调整完毕后的响应，这里用户可能会快速地做出多个连续的动作，但最终只关心最后一次动作的结果，防抖能够确保只在用户真正停止操作后才执行相关逻辑，避免不必要的计算。

二、防抖与节流的代码实现

//防抖
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

//节流
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}