在 JavaScript 中，setInterval() 函数被用来重复执行一个函数，可选地指定时间间隔。这个函数返回一个唯一的标识符，称为定时器 ID，可以使用 clearInterval() 函数取消对应的计时器。
为什么需要 clearInterval()？
当我们想要停止 setInterval() 函数重复执行一个函数时，我们需要使用 clearInterval() 函数。否则，setInterval() 将会永远地继续执行这个函数，直到页面关闭或者发生错误。
假设你正在写一个在线游戏，其中有一个定时器用于更新屏幕上的玩家位置。如果没有 clearInterval() 函数，这个定时器将不会停止，即使玩家已经离开了游戏。
如何使用 clearInterval()
clearInterval() 函数带有一个必需的参数，即一个之前由 setInterval() 返回的定时器 ID。当你调用 clearInterval() 时，它会取消与该 ID 相关联的计时器，并停止函数的执行。
----- ------- - -------------- -- - -- --------- -- ------ -- ------- -----------------------
在上面的示例中，我们创建了一个每秒钟执行一次的定时器，并将其 ID 存储在变量 timerId 中。当我们想要停止这个定时器时，我们只需要传递这个 ID 给 clearInterval() 函数。
在 React 中使用 clearInterval()
在 React 的生命周期方法中使用 setInterval() 通常是一种糟糕的做法，因为它可能会导致内存泄漏。当组件被卸载时，定时器仍然在运行，并且不会停止直到页面被关闭。
为了避免这个问题，我们可以使用 useEffect() 钩子和 clearInterval() 函数，在卸载组件之前停止定时器。
------ ------ - --------- --------- - ---- --------
-------- ------- -
----- ------- --------- - ------------
------------ -- -
----- ------- - -------------- -- -
-------------------- -- --------- - ---
-- ------
------ -- -- -----------------------
-- ----
------ -------------------
-在上面的示例中，我们使用 useEffect() 创建一个每秒钟更新计数器的定时器。在这个函数的返回语句中，我们使用 clearInterval() 停止这个定时器。由于我们传递了空数组作为第二个参数，这个 useEffect() 函数只会在挂载和卸载组件时调用一次。
结论
setInterval() 和 clearInterval() 是 JavaScript 编程的重要组成部分。使用 clearInterval() 函数可以帮助我们避免由于无限制地执行 setInterval() 函数而导致的性能和内存问题。在 React 中，我们可以使用 useEffect() 和 clearInterval() 来管理定时器并避免内存泄漏。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13227