引言
在前端开发中，我们经常使用 setTimeout 和 setInterval 来实现定时任务，但是在 ES11 中，这两个方法存在一些问题，本文将会介绍这些问题以及解决方法。
问题
1. 定时器不准确
在使用 setTimeout 和 setInterval 时，我们可能会遇到定时器不准确的问题。这是因为 JavaScript 是单线程执行的，当主线程执行耗时较长的任务时，定时器的回调函数可能会被延迟执行。
例如，下面的代码中，我们希望每隔 1 秒钟输出一次当前时间，但是由于主线程中的 for 循环耗时较长，定时器的回调函数并不会严格按照 1 秒钟的间隔执行。
for (let i = 0; i < 1000000000; i++) {
// 耗时操作
}
setInterval(() => {
console.log(new Date().toLocaleTimeString());
}, 1000);2. 定时器不可暂停
在使用 setInterval 时，我们可能会遇到无法暂停定时器的问题。例如，下面的代码中，我们希望每隔 1 秒钟输出一次当前时间，但是当点击按钮后，定时器并不会停止。
-- -------------------- ---- -------
------- -----------------------
--------
-------------- -- -
--------------- -----------------------------
-- ------
-------------------------------------------------------- -- -- -
-- -------
---
---------解决方法
1. 使用 requestAnimationFrame
为了解决定时器不准确的问题，我们可以使用 requestAnimationFrame 来实现定时任务。requestAnimationFrame 可以保证回调函数在下一次浏览器重绘之前执行，可以避免主线程阻塞。
例如，下面的代码中，我们使用 requestAnimationFrame 实现了每隔 1 秒钟输出一次当前时间的功能。
function loop() {
console.log(new Date().toLocaleTimeString());
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);2. 使用 clearInterval
为了解决定时器不可暂停的问题，我们可以使用 clearInterval 来清除定时器。但是，在使用 setInterval 时，我们需要记录定时器的 ID，才能够清除定时器。
例如，下面的代码中，我们记录了定时器的 ID，当点击按钮后，可以通过 clearInterval 清除定时器。
-- -------------------- ---- -------
------- -----------------------
--------
----- ----- - -------------- -- -
--------------- -----------------------------
-- ------
-------------------------------------------------------- -- -- -
---------------------
---
---------总结
在 ES11 中，使用 setTimeout 和 setInterval 存在一些问题，但是我们可以使用 requestAnimationFrame 和 clearInterval 来解决这些问题。在实际开发中，我们应该根据具体的场景选择合适的定时器方法，以保证代码的可靠性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e5aee21886fbafa413585d