在前端开发中，定时器是常见的工具，它可以在一定的时间间隔内重复执行一段代码，setInterval() 和 clearInterval() 是两个非常重要的方法。本文将介绍如何在 ES6 中正确使用 setInterval() 和 clearInterval()方法，以及封装一个可复用的定时器工具类。
使用 setInterval() 方法
setInterval() 方法是在一定时间间隔后重复执行给定的函数。它的语法结构非常简单，如下：
setInterval(fn, delay, arg1, arg2, ...)
其中：
fn：要执行的函数。delay：指定间隔多长时间执行一次函数，单位为毫秒。arg1, arg2, ...：传递给函数的参数。
下面是一个使用 setInterval() 方法的示例：
let count = 0;
const intervalId = setInterval(() => {
console.log(count++);
}, 1000);在这个示例中，我们使用箭头函数每隔一秒钟输出 count 的值，并将 setInterval() 方法的返回值（一个 ID）储存在 intervalId 中。
使用 clearInterval() 方法
当需要停止 setInterval() 方法的执行时，我们可以使用 clearInterval() 方法，它的语法结构如下：
clearInterval(intervalId)
其中 intervalId 指的是要停止的定时器的 ID。继续上面的示例，下面是如何使用 clearInterval() 方法停止定时器：
setTimeout(() => {
clearInterval(intervalId);
console.log('定时器已停止。');
}, 5000);在这段代码中，我们使用 setTimeout() 方法来延迟 5 秒后停止定时器，并输出一条信息。
如何封装一个定时器工具类
为了方便复用和维护，我们可以封装一个定时器工具类来处理定时器。下面是一个简单的封装示例：
-- -------------------- ---- -------
----- ----- -
--------------- ------ -
------- - --- -- ------
---------- - ----- -- ----- -- ----
--------------- - ----- -- ---- --
-
----------- ----- -
--------------- - -------------------- ----------- ----- ------
-
------ -
-------------------------------
-
-在这个示例中，我们使用了 class 类来封装一个定时器工具类 Timer。它的成员变量包括要执行的函数 fn、间隔时间 delay 和定时器的 ID intervalId。
方法包括：
start(arg1, arg2)：开始执行定时器，传递给 fn 的参数为 arg1 和 arg2。stop()：停止执行定时器。
下面是如何使用这个定时器工具类：
-- -------------------- ---- ------- ----- ----- - --- -------- -- - ----------------------- -- ------ -------------- ------------- -- - ------------- ----------------------- -- ------
在这个示例中，我们实例化了 Timer 类，并使用 start() 方法开始执行定时器；设置了 5 秒钟后停止定时器并输出一条信息。
总结
ES6 中使用 setInterval() 和 clearInterval() 方法非常简单。无论是直接调用方法，还是封装成类，在面对定时任务时，这两个方法都是不可或缺的。希望本文的介绍和示例可以帮助你更好地使用这两个方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a37d95add4f0e0ffba4d29