防抖（Debounce）和节流（Throttle）的区别和应用场景

防抖（Debounce）和节流（Throttle）虽然都是用来限制函数的执行频率，但它们的实现方式和应用场景有所不同。以下是两者的主要区别：

1. 执行原理

• 防抖（Debounce）：

  • 执行条件：在指定的延迟时间内，如果函数再次被触发，计时器会重新计时，直到延迟时间结束且没有新的触发时，函数才会执行。
  • 效果：确保函数在一段时间内只会执行一次，并且是事件触发后的最后一次。适用于希望在一连串事件结束后执行某个操作的场景。

• 节流（Throttle）：

  • 执行条件：在指定的时间间隔内，函数只会执行一次，无论该时间间隔内事件被触发了多少次。
  • 效果：确保函数在一定时间内最多执行一次。适用于控制持续触发事件的执行频率，防止函数执行过于频繁。

2. 使用场景

• 防抖（Debounce）：

  • 适用于需要在一段时间内等到所有触发事件都完成后再执行函数的场景。
  • 典型应用：搜索框自动补全、窗口大小调整（resize）、表单输入验证。
  • 示例：用户停止输入后的搜索请求发送。

• 节流（Throttle）：

  • 适用于需要定期执行某个函数，而不是立即执行的场景。
  • 典型应用：滚动事件（scroll）、页面滚动加载、按钮重复点击。
  • 示例：限制滚动事件的触发频率。

3. 代码对比

• 防抖：

  • 每次事件触发都会重置计时器，只有在延迟时间结束后且没有新事件触发，函数才会执行一次。

  function debounce(func, delay) {let timer;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};
  }
  

• 节流：

  • 在设定的时间间隔内，函数只能执行一次。即使多次触发，函数也不会立即执行，而是在规定的时间间隔后执行一次。

  function throttle(func, limit) {let lastFunc;let lastRan;return function (...args) {const context = this;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(lastFunc);lastFunc = setTimeout(() => {if ((Date.now() - lastRan) >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
  }
  

总结

• 防抖关注的是在一连串事件结束后执行一次（等待时间内如果有新事件触发就重新计时），强调“最后一次执行”。
• 节流关注的是在指定时间间隔内执行一次（无论期间有多少次触发），强调“定期执行”。

根据实际需求选择合适的技术，可以有效提升应用的响应速度和用户体验。