防抖节流一学就会

学完防抖，自然得顺便了解一下它的好基友——节流。

节流的定义和原理

节流，顾名思义，就是控制事件触发的频率，让它在一定时间内至多执行一次。其原理是使用一个定时器，当事件被触发时，如果定时器未启动，则立即执行该事件。否则，将重置定时器，等待下一次事件触发。

节流的应用场景

节流的应用场景主要集中在对频繁触发的事件进行控制，避免不必要的重复调用。常见的应用场景有：

1. 窗口大小改变监听： 当窗口大小发生变化时，触发函数通常会被频繁调用。通过节流，可以限制函数调用的频率，避免对性能造成影响。
2. 滚动事件处理： 在滚动页面时，如果滚动事件处理函数不进行节流，可能会导致大量不必要的调用，影响页面流畅度。节流可以限制函数调用的频率，保证页面平滑滚动。
3. 按钮点击事件处理： 当按钮被快速点击多次时，如果点击事件处理函数不进行节流，可能会导致多次不必要的操作。节流可以限制函数调用的频率，保证按钮的正常使用。

节流与防抖的对比

节流与防抖虽然都是用于控制函数调用的频率，但其原理和应用场景却有所不同。防抖的目的是延迟函数的执行，直到事件停止触发后才执行一次。而节流的目的是控制函数的调用频率，使之至多在指定时间内执行一次。

使用节流

在JavaScript中，可以使用 lodash 库来实现节流功能。以下是 Lodash 的 _.throttle() 方法的语法：

_.throttle(func, wait, [options])

其中：

• func 是要节流的函数。
• wait 是控制函数调用频率的时间间隔，单位为毫秒。
• options 是一个可选对象，用于配置节流的选项。

举例

下面是一个使用 Lodash 的 _.throttle() 方法实现节流的示例：

const throttleFunction = _.throttle((e) => {
  // 在此处执行函数的逻辑
}, 200);

// 绑定事件监听器
window.addEventListener('scroll', throttleFunction);

在该示例中，当窗口滚动事件被触发时，会执行 throttleFunction 函数。但由于使用了节流，函数至多每 200 毫秒执行一次，从而避免了对性能造成影响。

总结

节流是一种常用的技术，可以控制事件触发的频率，使其在一定时间内至多执行一次。它常用于对频繁触发的事件进行控制，避免不必要的重复调用。通过合理使用节流，可以优化代码性能并提高用户体验。

👉

如果你觉得这篇博文有用，请点赞、收藏或分享给你的朋友！