在前端开发中，经常需要使用定时器来执行某些任务。setTimeout 是最常用的方法之一，但它有一个缺点——不是很精确。这是因为 setTimeout 的延迟时间并不是绝对准确的。那么有没有更好的方法呢？本文将带你了解如何创建一个更准确的 JavaScript 定时器。
问题分析
先来看看 setTimeout 的不足之处。在调用 setTimeout 函数时，我们传递了一个延迟时间（单位为毫秒）和要执行的函数。但是，由于 JavaScript 是单线程运行的，可能会发生以下情况：
- 在执行其他任务时，浏览器可能会占用 CPU 资源，并导致当前任务被推迟执行。
- 如果队列中已经有其他的任务等待执行，
setTimeout的回调函数也会被推迟执行。
这些因素都会导致 setTimeout 的延迟时间不是百分百准确的。如果你需要更准确的定时器，可以使用下面介绍的方法。
更准确的定时器
要创建一个更准确的定时器，我们需要使用 requestAnimationFrame 方法。requestAnimationFrame 是浏览器提供的一个 API，用于优化动画效果。这个方法会在浏览器下一次重绘之前执行回调函数。
通过使用 requestAnimationFrame 方法，我们可以保证定时器的延迟时间更加准确。下面是一个简单的代码示例：
-- -------------------- ---- -------
-------- ----------------------- ------ -
--- ----- - -----
-------- ---------------- -
-- -------- ----- - ----------
----- ------- - --------- - ------
-- -------- -- ------ -
-----------
- ---- -
-----------------------------
-
-
-----------------------------
-这个函数接受两个参数：回调函数和延迟时间（单位为毫秒）。在内部，它会记录当前时间戳，并在每次浏览器重绘之前检查经过的时间是否达到了指定的延迟时间。如果是，则执行回调函数；如果不是，则继续等待下一次重绘。
使用示例
现在我们来看看如何使用这个函数。假设我们要在页面中创建一个每隔 2 秒钟输出一次数字的定时器。使用 setTimeout 可能会导致定时器不够精确，但是使用 accurateTimer 函数就可以保证准确性。
const timerElement = document.getElementById('timer');
let count = 0;
accurateTimer(() => {
count++;
timerElement.textContent = count;
}, 2000);这段代码首先获取了页面上的一个元素，然后定义了一个计数器变量 count，并传递一个回调函数给 accurateTimer 函数。回调函数会在每隔 2 秒钟执行一次，并将 count 变量的值赋给页面元素的文本内容。
总结
本文介绍了一个使用 requestAnimationFrame 创建更准确的 JavaScript 定时器的方法。相比于传统的 setTimeout 方法，这种方法可以提高定时器的精确度，特别是在需要进行动画效果优化等场景下更为实用。如果你在前端开发中遇到类似问题，不妨尝试使用这种更加准确的定时器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13183