在前端开发中， setInterval 和 clearInterval 是常用的两个函数。它们可以帮助我们实现定时任务，比如定时更新页面上的数据、轮播图等。本文将会详细介绍这两个函数的用法，并提供一些示例代码和注意事项。
setInterval 函数的用法
setInterval 函数可以周期性地调用一个函数。该函数接受两个参数：要执行的函数以及时间间隔（毫秒）。
setInterval(myFunction, 1000);
上面的代码表示每隔 1 秒钟就会执行 myFunction 函数一次。
除了函数名和时间间隔外，我们还可以通过额外的参数来给被调用的函数传递参数。例如：
setInterval(myFunction, 1000, arg1, arg2);
如果想要停止周期性调用函数，我们可以使用 clearInterval 函数。该函数需要传入一个 ID 参数，这个 ID 就是 setInterval 返回的值，代表正在运行的定时器。
clearInterval 函数的用法
const timerId = setInterval(myFunction, 1000); clearInterval(timerId);
上面的代码表示在 1 秒钟后停止 myFunction 的周期性调用。
示例
下面是一个简单的示例，演示如何使用 setInterval 更新当前时间。
-- -------------------- ---- -------
--------- -----
------
------
------------------ ----------
----- ----------------
-------
------
-- --------------
--------
-------- ------------ -
----- --- - --- -------
----- ----- - ---------------
----- ------- - -----------------
----- ------- - -----------------
----- ---------- - ---------------------------------
------------------------------------------- - -----------
-
-- ---------
----------------------- ------
---------
-------
-------上面的代码中，我们定义了一个 updateTime 函数来更新当前时间，并使用 setInterval 函数每隔 1 秒钟调用一次该函数。页面中有一个 <p> 元素用于显示当前时间。
注意事项
虽然 setInterval 和 clearInterval 看起来很简单，但在实际开发中还是有一些需要注意的问题：
- 尽量避免在
setInterval中执行耗时操作，否则可能会导致页面卡顿。 - 如果不小心多次调用
setInterval，可能会导致同一个函数被重复执行，进而影响性能。 - 清除定时器时一定要确保传入正确的 ID 值，否则可能会误删其他正在运行的定时器。
希望本文能够对你理解和使用 setInterval 和 clearInterval 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13399