理解JavaScript事件节流：setTimeout的正确应用与常见误区

本文深入探讨了 javascript 中利用 `settimeout` 实现 事件 节流（throttling）的原理与实践。通过分析 mdn 文档中一个常见的误解示例，我们澄清了 `settimeout` 在没有额外逻辑控制下无法实现节流的本质。随后，文章提供并详细解释了使用状态标志结合 `settimeout` 来有效限制事件处理函数执行频率的正确方法，旨在帮助开发者避免性能问题，优化用户体验。

事件节流（Throttling）的概念与重要性

在 前端 开发中，用户交互事件（如 scroll、resize、mousemove 或 input）可能会以极高的频率触发。如果每次事件触发都执行复杂的计算或dom 操作，可能会导致 浏览器 性能下降、页面卡顿，严重影响用户体验。为了解决这个问题，我们需要对事件处理函数的执行频率进行控制，其中“节流”（Throttling）便是一种常用的技术。

节流的目的是在一定时间内，无论事件触发多少次，都只允许事件处理函数执行一次。例如，设置一个 1000 毫秒的节流时间，那么在 1 秒内，即使滚动事件触发了 100 次，我们的处理函数也只会执行一次。这与“防抖”（Debouncing）有所不同，防抖是在事件停止触发一段时间后才执行一次函数。

MDN 示例中的常见误解

MDN 文档中关于 Element scroll Event的示例，在介绍 setTimeout 用于节流时，提供了一个可能引起误解的代码片段：

element.addEventListener("scroll", (event) => {output.innerhtml = "Scroll event fired!";   setTimeout(() => {     output.innerHTML = "Waiting on scroll events……";   }, 1000); });

许多开发者，包括初学者，可能会认为这段代码实现了节流。然而，仔细分析会发现，它并没有真正限制 scroll 事件处理函数的执行频率。

立即学习“Java 免费学习笔记（深入）”；

为什么 这个示例没有实现节流？

1. addEventListener 每次都执行： 每次 scroll 事件触发时，addEventListener 的 回调函数 都会立即执行。这意味着 output.innerHTML = “Scroll event fired!”; 这行代码会以事件触发的原始频率执行。
2. setTimeout 的独立性： 每次 回调函数 执行时，都会独立地调用 setTimeout 来调度一个在 1000 毫秒后执行的任务（将 output.innerHTML 更新为 ”Waiting on scroll events…”）。setTimeout 并不会自动取消或替换之前由其他 scroll 事件调度的 setTimeout 任务。
3. 缺乏状态控制： 真正的节流需要一个机制来“记住”上一次函数执行的时间，并阻止在节流周期内再次执行。上述代码缺乏这样的状态控制。它只是延迟了输出“Waiting on scroll events…”这个消息，而不是延迟或限制了整个事件处理逻辑的执行。

实际上，这个示例只是展示了当 scroll 事件发生时，会先显示“Scroll event fired!”，然后 1 秒后，无论期间是否还有其他滚动事件，都会显示“Waiting on scroll events…”。它更多地是演示 setTimeout 的 异步 延迟特性，而非节流。

魔乐社区

天翼云和华为联合打造的 AI 开发者社区，支持 AI 模型评测训练、全流程开发应用

102

查看详情

使用 setTimeout 实现事件节流的正确方法

要使用 setTimeout 实现真正的事件节流，我们需要引入一个“状态标志”或“锁”机制，来控制事件处理函数的实际执行。当一个事件被处理后，我们锁定该功能，并在节流时间结束后才解锁。

以下是实现节流的正确代码示例：

let isThrottled = false; // 状态标志，初始为未节流状态  element.addEventListener("scroll", (event) => {// 如果当前处于节流状态，则直接返回，不执行后续逻辑   if (isThrottled) {return;}    // 进入节流状态，阻止在节流周期内再次执行   isThrottled = true;    // 立即执行事件处理逻辑   output.innerHTML = "Scroll event fired!";   console.log("Scroll event processed at:", new Date().toLocaleTimeString());    // 设置一个定时器，在指定时间后解除节流状态   setTimeout(() => {     isThrottled = false; // 解除节流状态     output.innerHTML = "Waiting on scroll events……"; // 更新提示信息     console.log("Throttling period ended.");   }, 1000); // 节流时间为 1000 毫秒 });

工作原理详解：

1. isThrottled 状态标志： 我们声明一个布尔变量 isThrottled，初始值为 false，表示当前没有处于节流状态，可以执行事件处理函数。
2. 首次事件触发：
   • 当 scroll 事件首次触发时，isThrottled 为 false，条件 if (isThrottled)不满足，代码继续执行。
   • isThrottled 被设置为 true，表示我们已经进入了节流周期。
   • 事件处理的核心逻辑（例如更新 output.innerHTML）立即执行。
   • 一个 setTimeout 被调度，在 1000 毫秒后将 isThrottled 重新设置为 false，从而解除节流状态。
3. 节流周期内的后续事件触发：
   • 如果在 1000 毫秒的节流周期内，scroll 事件再次触发，此时 isThrottled 为 true。
   • 条件 if (isThrottled)满足，函数会立即 return，后续的事件处理逻辑（包括设置新的 setTimeout）将不会被执行。这样就有效阻止了事件处理函数在短时间内多次执行。
4. 节流周期结束后：
   • 1000 毫秒后，之前调度的 setTimeout 回调函数执行，将 isThrottled 重新设置为 false。
   • 此时，如果 scroll 事件再次触发，它将能够再次进入处理逻辑，开启一个新的节流周期。

通过这种方式，我们确保了在任意 1000 毫秒内，事件处理函数最多只会被执行一次，从而实现了有效的事件节流。

总结与注意事项

• 核心原理： setTimeout 实现节流的关键在于引入一个状态标志（或称之为“锁”），用于控制在指定时间间隔内，事件处理函数是否可以执行。
• 避免误区： 单纯使用 setTimeout 进行延迟并不能实现节流，它只会延迟特定操作的执行，而不会限制事件处理函数本身的触发频率。
• 选择合适的节流时间： 节流时间的选择取决于具体应用场景和用户体验需求。过短可能达不到优化效果，过长可能导致响应不及时。
• 更高级的实现： 在实际项目中，为了代码的健壮性和可维护性，通常会使用现成的节流 工具 函数，例如 Lodash 库中的_.throttle()方法，它们提供了更完善的实现，包括对首次执行、最后一次执行等情况的处理。

理解 setTimeout 在节流中的正确应用，对于编写高性能和用户友好的javaScript 应用至关重要。通过掌握状态标志的运用，开发者可以有效地管理高频事件，提升 Web 应用的整体性能。