在前端开发中，我们经常使用 setInterval 来定时执行一些代码。但是，当这些代码不再需要执行时，我们也需要停止 setInterval 的执行，以免造成不必要的资源浪费。本文将介绍如何停止 setInterval 的执行，并提供一些示例代码。
使用 clearInterval()
要停止 setInterval 的执行，可以使用 JavaScript 内置的函数 clearInterval()。该函数接受一个参数，即要停止执行的 setInterval 返回的 ID。
下面是使用 setInterval 和 clearInterval 的示例代码：
--- ---------- - -------------- -- - ------------------- --------- -- ------ ------------- -- - -------------------------- ------------------------ -- ------
在上面的代码中，我们首先使用 setInterval 创建了一个每秒输出一次 "Hello, world!" 的定时器，并将返回的 ID 存储在变量 intervalId 中。然后，我们使用 setTimeout 在 5 秒后调用 clearInterval 函数，并传入 intervalId 作为参数。
执行上述代码后，会在控制台上输出 5 次 "Hello, world!"，然后输出 "Stopped!"，并停止定时器的执行。
避免内存泄漏
尽管使用 clearInterval 可以停止定时器的执行，但是如果定时器的回调函数中包含对其他对象或函数的引用，而这些对象或函数又与定时器的作用域不同，就可能导致内存泄漏。因此，在停止定时器的同时，我们还需要注意是否存在内存泄漏的风险。
下面是一个可能导致内存泄漏的示例代码：
--- --- - -
------ --
------- -
--------------- - -------------- -- -
--------------------------
-- ------
--
------ -
-------------------------------
-
--
------------
------------- -- -
-----------
-- ------在上面的代码中，我们创建了一个对象 obj，该对象包含两个方法 start() 和 stop()。在 start() 方法中，我们使用 setInterval 创建了一个每秒输出计数器值的定时器，并将返回的 ID 存储在 this.intervalId 中。在 stop() 方法中，我们调用了 clearInterval(this.intervalId) 停止定时器的执行。
然而，由于在 start() 方法中使用了箭头函数，this 指向的是全局作用域，而不是 obj 对象本身。因此，当我们调用 obj.stop() 停止定时器的执行时，实际上并没有释放所有对 obj 对象的引用，从而导致内存泄漏。
为避免内存泄漏，我们可以使用 bind() 或者箭头函数来确保回调函数中的 this 指向正确的对象，或者在停止定时器的同时手动释放其他与定时器相关的引用。
结论
在前端开发中，我们经常需要使用 setInterval 创建定时器来定期执行某些代码。但是，当这些代码不再需要执行时，我们也需要及时地停止定时器的执行，以避免不必要的资源浪费。通过使用 JavaScript 内置的函数 clearInterval()，我们可以很容易地停止定时器的执行，并减少内存泄漏的风险。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13628