setInterval 不准的原因及问题解决方案
作者：代码里的小猫咪
setInterval 是 JavaScript 中用于定时执行任务的常用方法。它的基本语法如下：
const intervalId = setInterval(callback, delay, ...args);
- callback 是要执行的函数。
- delay 是每次执行之间的时间间隔（以毫秒为单位）。
- args 是传递给 callback 的附加参数。
但是，在实际使用中，可能会发现 setInterval 并不总是精确地按照预期的间隔时间来执行任务。这是因为 JavaScript 中的定时器并不是绝对精准的。
1. 为什么定时器不精准？
1.1 单线程执行
JavaScript 是单线程的，这意味着所有的任务都是在一个线程上排队执行的。虽然通过 setInterval 设置了定时器，想要周期性地执行某个任务，但如果在回调执行时主线程正在处理其他任务（比如执行计算、渲染 UI、处理用户事件等），就会导致回调函数被延迟执行，从而使定时器间隔时间不准确。
举个 🌰：设置了一个定时器，每隔 100ms 执行一次回调。
let count = 0;
const startTime = Date.now();
console.log(`Start time: ${startTime} ms`);
const intervalId = setInterval(() => {
count++;
console.log(`Callback executed: ${count}, Time: ${Date.now() - startTime} ms`);
}, 100);
// 这里模拟一个会占用主线程的长任务
setTimeout(() => {
console.log(`Long task starting... Time: ${Date.now() - startTime} ms`);
let start = Date.now();
while (Date.now() - start < 500) {} // 占用 500ms 的时间
console.log(`Long task finished, Time: ${Date.now() - startTime} ms`);
}, 0);事件流和时间线分析：
t = 0ms：开始时刻，setInterval 在 100ms 后首次触发，然后执行 setTimeout 长任务。
t = 500ms：长任务结束，主线程被释放，但主线程的阻塞导致 setInterval 的回调没有按预定时间执行。
t = 100ms：setInterval 第一次回调，但由于主线程被阻塞，回调没有执行。
t = 600ms：setInterval 执行下一次回调。后面的 callback 也对应推迟。
输出日志：
主线程被占用时，定时器回调会被推迟，造成时间间隔的不准确。这种情况发生在主线程繁忙时，任务执行排队，定时器回调会“排队”到后面，等待后续执行。
1.2 任务排队和事件循环
JavaScript 使用事件循环来调度任务。setInterval 的回调是被放入 宏任务队列 中的，而宏任务队列的执行是有优先级的，只有在当前执行栈为空时，才会去执行队列中的任务。如果在执行回调时有其他更优先的任务（如 UI 渲染、用户输入处理等），那么定时器回调可能会被延迟。
举个 🌰
let count = 0;
const startTime = Date.now();
// 设置一个定时器，每 100ms 执行一次回调
const intervalId = setInterval(() => {
count++;
console.log(`setInterval callback executed: ${count}`);
}, 100);
// 模拟高优先级任务
console.log('Start of the script execution，time：', Date.now() - startTime);
// 使用 Promise 模拟一个高优先级任务
Promise.resolve().then(() => {
console.log('Promise microtask started，time：', Date.now() - startTime);
// 模拟一些耗时的同步操作
let start = Date.now();
while (Date.now() - start < 300) {} // 阻塞主线程 300ms
console.log('Promise microtask finished，time：', Date.now() - startTime);
});
// 模拟低优先级的异步任务
setTimeout(() => {
console.log('setTimeout task executed，time：', Date.now() - startTime);
}, 50);
console.log('End of the script execution，time：', Date.now() - startTime);
微队列优先执行，导致 setInterval 和 setTimeout 的回调被推迟。
1.3 回调执行时间的累积误差
setInterval 设定的间隔时间只是开始和结束之间的期望时间，但回调函数的执行时间会影响下一个回调的执行时间。如果回调函数本身执行时间较长，那么定时器的间隔就会被推迟。
举个 🌰
let count = 0;
const startTime = Date.now();
const intervalId = setInterval(() => {
count++;
console.log(`Callback executed: ${count}, time: ${Date.now() - startTime}`);
// 模拟一个需要较长时间的操作
let start = Date.now();
while (Date.now() - start < 100) {} // 长时间的计算任务（100ms）
}, 50);
解释：定时器第一次触发时，回调开始执行，100ms 后 while 循环才结束，所以下一个回调被推迟。新的定时器回调只能在上一个回调结束后才会被执行，后续回调也会相应推迟。
当回调函数本身执行占用的时间太长，它会影响到下一个回调的执行时间，导致实际的回调间隔变得比预期更长。因此，定时器的间隔时间不仅仅是设定的期望时间，回调函数本身的执行时间也会对实际间隔产生影响。
1.4 最小时间间隔为 4ms
为什么存在 4ms 的最小时间限制？
当嵌套 5 层以上的定时器时，浏览器会因为时间精度和性能原因，将最小执行间隔限制为 4 ms。这是一种性能优化措施，目的是防止过于频繁的定时器调用占用过多的计算资源，导致页面的响应变慢或无响应。这个 4 ms 的限制对于大多数常见的 Web 应用程序来说已经足够使用。
举个 🌰
// 试图设置 1ms 间隔
let count = 0;
const startTime = Date.now();
const intervalId = setInterval(() => {
count++;
if (count === 100) {
console.log('100 times executed', Date.now() - startTime);
clearInterval(intervalId);
}
}, 1); // 这里实际上会以 4ms 或更长的间隔执行
如果多个定时器同时设置为非常小的时间间隔（如 1ms），浏览器可能会把这些定时器合并成更大的间隔（如 4ms）。因此，setInterval 的间隔时间不会精确到设置的时间，尤其在高频率执行时。
1.5 失活页面强制调整到 1s
这种优化通常称为 页面不可见时定时器冻结。它意味着当浏览器页面不处于前台（如切换标签页或最小化浏览器窗口时），浏览器会自动降低定时器的执行频率和精度，来节省资源并提升性能。例如，setInterval 的最小间隔时间可能会从 100 毫秒变成 1 秒，甚至更长。
具体原因：在浏览器后台，页面不再主动渲染，用户的交互也被暂停，因此浏览器会降低后台页面的计算和渲染频率，以减少资源消耗。当页面失活时，setInterval 的频率会被降低，以减少对 CPU 和内存的占用。
let count = 0;
let intervalId = setInterval(() => {
count++;
console.log(`回调 #${count} 执行, 时间: ${new Date().toLocaleTimeString()}`);
}, 100); // 设置为 100 毫秒间隔
// 在 3 秒后清除定时器
setTimeout(() => {
clearInterval(intervalId);
console.log("定时器已停止");
}, 3000);2. 如何实现更精准的定时器？
以下是几种常用的方法：
2.1 使用 requestAnimationFrame（针对动画）
requestAnimationFrame 是一种专门为动画设计的定时器方法，与 setInterval 和 setTimeout 不同，requestAnimationFrame 在浏览器的渲染周期内执行回调，因此，能提供比 setInterval 更加精准的时间间隔，特别适用于动画或视觉渲染任务。
原理：
- requestAnimationFrame 会确保回调函数在下一次重绘之前执行，并且在浏览器处于后台时会自动暂停，从而节省资源。
- 由于 requestAnimationFrame 是与浏览器的刷新率绑定的，它的执行频率与浏览器的刷新率（通常是每秒 60 次，即 16.67 毫秒）同步。因此它能在不同的浏览器和设备上提供更一致的执行间隔。
举个 🌰：实现一个简单的动画，让一个小方块在屏幕上移动。
使用 setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>setInterval vs requestAnimationFrame</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
}
.box {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
let posX = 0;
// 使用 setInterval 来创建动画
setInterval(() => {
posX += 2;
if (posX > window.innerWidth) {
posX = -50;
}
box.style.transform = `translateX(${posX}px)`;
}, 16); // 约等于每秒 60 帧
</script>
</body>
</html>
示例中，我们设置了定时器每 16 ms 执行一次回调，这大约是每秒 60 次（60 FPS）。但是由于 setInterval 是基于固定时间间隔的，它不能保证每次回调执行时都能与浏览器的渲染周期同步。如果回调执行得太慢，或者页面有其他任务需要处理，定时器可能会出现间隔不准的情况，导致动画卡顿。
使用 requestAnimationFrame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>setInterval vs requestAnimationFrame</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
}
.box {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
let posX = 0;
// 使用 requestAnimationFrame 来创建动画
function animate() {
posX += 2;
if (posX > window.innerWidth) {
posX = -50;
}
box.style.transform = `translateX(${posX}px)`;
requestAnimationFrame(animate); // 每次动画完成后请求下一帧
}
requestAnimationFrame(animate); // 启动动画
</script>
</body>
</html>
示例中，回调函数被安排在浏览器下次重绘前执行。由于它与浏览器的渲染周期同步，它能确保每帧动画的执行间隔更精确，而且通常与浏览器的刷新率（一般是每秒 60 帧）一致。
更重要的是，当页面切换到后台时，requestAnimationFrame 会自动暂停，减少资源消耗。而 setInterval 则不受影响，可能会继续执行，浪费资源。
2.2 使用 Web Workers
如果需要一个不依赖浏览器渲染循环的精确定时器（例如处理后台计算任务），可以使用 Web Workers。Web Workers 允许在后台线程中运行 JavaScript 代码，而不会阻塞主线程。通过 Web Workers 可以获得更高精度的定时器控制，尤其适用于那些不涉及 UI 渲染的任务。
原理：
- Web Workers 不受浏览器的渲染影响，因此它们不会因为页面切换到后台而降低执行频率。
- 由于其与 UI 线程分离，Web Workers 的定时器可以维持更稳定的间隔，避免了主线程中的限制。
举个 🌰
场景：我们需要一个精确的定时器来执行计算任务，例如：每隔 50ms 进行一次计算。这个任务是一个后台计算任务，与 UI 渲染无关，而且希望它在页面切换到后台时不受影响。
1、创建 Web Worker 来处理后台任务。
// worker.js
// 接收到主线程的消息后执行定时任务
let intervalId;
self.onmessage = function (e) {
if (e.data === 'start') {
// 启动定时器，每50毫秒执行一次计算
intervalId = setInterval(() => {
const result = Math.random(); // 模拟计算任务（例如生成随机数）
self.postMessage(result); // 将计算结果发送回主线程
}, 50);
} else if (e.data === 'stop') {
// 停止定时器
clearInterval(intervalId);
}
};
2、主线程代码（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Worker</title>
<style>
body {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
}
#result {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h3>Web Worker 精确定时器</h3>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div id="result"></div>
</div>
<script>
// 创建一个新的 Web Worker
const worker = new Worker('worker.js');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
// 显示计算结果的元素
const resultDiv = document.getElementById('result');
// 监听 Web Worker 返回的数据
worker.onmessage = function (e) {
const result = e.data;
resultDiv.innerText = `计算结果: ${result}`;
};
// 启动 Web Worker 中的定时任务
startBtn.addEventListener('click', function () {
worker.postMessage('start');
});
// 停止 Web Worker 中的定时任务
stopBtn.addEventListener('click', function () {
worker.postMessage('stop');
});
</script>
</body>
</html>
特点：精确性、独立性、稳定性。
实际应用：
这种精确的定时器非常适用于一些不涉及 UI 更新的任务，如：
- 后台数据计算任务（例如处理大量数据、定时抓取数据等）
- 数据同步（例如定时发送请求到服务器）
- 游戏引擎的后台计算任务
- AI 算法或大数据分析等后台任务
使用 Web Workers 可以确保这些任务的执行频率更加稳定且不受主线程的干扰，非常适用于后台计算任务，不会因为页面切换到后台而降低性能。
2.3 使用 performance.now()
performance.now() 提供了比 Date.now() 更高精度的时间戳（微秒级别），适用于需要高精度计时的场景，比如高频率任务或精细调度。与 setTimeout 或 setInterval 结合使用时，能更精确地控制时间间隔。
原理：
- performance.now() 提供的时间戳是相对于页面加载开始的，而不是当前时间，这使得它能够在不同设备和系统中提供一致的精度。
- 因为 performance.now() 的精度更高，可以计算出每次调用的精确间隔，避免了定时器本身的偏差。
举个 🌰
<div class="container">
<h3>高精度定时器</h3>
<div id="result">计时中...</div>
</div>
<script>
let lastTimestamp = performance.now(); // 初始化时间戳
let totalTime = 0; // 累积经过的时间
let count = 0; // 计数器，记录执行次数
function tick() {
const now = performance.now();
const elapsed = now - lastTimestamp; // 计算两次回调之间的时间间隔
lastTimestamp = now;
totalTime += elapsed;
count++;
// 更新显示的时间间隔
document.getElementById('result').innerHTML = `
总执行时间: ${totalTime.toFixed(2)} 毫秒<br>
执行次数: ${count} 次<br>
平均间隔: ${(totalTime / count).toFixed(2)} 毫秒
`;
setTimeout(tick, 50); // 动态调整下一次执行的间隔
}
// 启动高精度定时器
tick();
</script>
注意一点：(totalTime / count) 和 elapsed 之间会出现偏差。原因如下：
1、时间累积误差（Cumulative Error）
每次执行回调时，elapsed 计算的是当前回调与上次回调之间的时间间隔，而 (totalTime / count) 是根据所有回调的累积时间来计算的平均间隔。
由于每次调用时 elapsed 只是当前执行的时间差，而 (totalTime / count) 是逐步累加的，可能会随着时间的推移引入微小的误差，尤其是在高频率任务中。
这类误差累积可能使得两个值之间的差异逐渐增大，尤其是在多次计算的情况下。
2、setTimeout 的不精确性
setTimeout 不能精确地按照指定的间隔时间执行回调，它会受到事件队列的调度、CPU 负载、浏览器渲染周期等因素的影响。每次 setTimeout 的延迟可能会有所不同，导致实际的回调执行时间存在波动。这就会导致 elapsed 的值和 (totalTime / count) 之间产生差异。
例如，在高负载的情况下，回调可能会比预期的 50ms 晚几毫秒才执行，从而导致 elapsed 比实际的 50ms 值略大，而 (totalTime / count) 则会反映出一个平均值，减小了这种偏差。
3、调度队列的延迟
在浏览器的事件循环（Event Loop）中，任务队列中的回调会按照先后顺序执行。即使设置了 50 ms 的延迟，但回调的执行也可能因为其他任务（例如渲染、计算等）在任务队列中排队而延迟执行。这意味着 elapsed 的计算不一定精确地反映实际的间隔时间，导致 (totalTime / count) 和 elapsed 出现偏差。
4、performance.now() 与 setTimeout 调度的差异
虽然 performance.now() 提供了高精度的时间戳，但它只能准确地提供当前的时间点，而 setTimeout 并不是在精确的时间点执行回调，而是放入任务队列中，并等待浏览器调度。
因此，实际的时间间隔（通过 elapsed 计算的）可能会比理想的间隔稍长，尤其是在高负载或繁忙的浏览器中。
总结，这些误差是由浏览器的定时器实现机制所决定的，无法完全避免。但通过合理的设计和优化，可以减小这种误差对精度的影响。
2.4 避免重叠的 setTimeout 或 setInterval 调用
浏览器的定时器方法（如 setTimeout 或 setInterval）可能因为任务队列的积压、事件循环的阻塞、或页面切换等原因，导致实际回调执行的间隔不准确。
解决方法：
- 逐步递归调用：代替 setInterval 使用递归的 setTimeout，确保定时器按期望的间隔执行，而不是固定的时间间隔。
- 调整回调中的逻辑：每次回调时都重新计算下一个定时器的执行时间，而不是使用固定的时间间隔。
举个 🌰
let lastTime = performance.now();
let count = 0;
function recursiveTimeout() {
const now = performance.now();
const elapsed = now - lastTime;
if (elapsed >= 100) { // 精确的 100ms 间隔
count++;
console.log(`回调 #${count}, 时间: ${now}`);
lastTime = now;
}
// 递归调用 setTimeout，确保间隔准确
setTimeout(recursiveTimeout, 100 - (elapsed % 100));
}
recursiveTimeout(); // 启动递归定时器
2.5 在 Node.js 中使用 setImmediate() 或 setInterval()
在 Node.js 环境中，setImmediate() 和 setInterval() 可以提供比普通的 setTimeout() 更高精度的定时器。
setImmediate() 用于在当前事件循环结束后执行回调，通常比 setTimeout(fn, 0) 更精确。
3. 为什么需要精确的定时器？
精准的定时器对于某些应用至关重要，如：
- 动画渲染：动态渲染的 UI 需要高精度的定时器来确保动画流畅。
- 游戏引擎：游戏引擎需要根据时间精确更新游戏逻辑。
- 实时通信：实时系统（如视频通话、实时数据同步等）需要保证定时任务的准确性，以确保数据的实时性和一致性。
通过优化定时器的精度，可以提升应用的流畅度、实时性和响应速度，确保用户体验不被延迟或不精确的定时器行为影响。
到此这篇关于setInterval 不准的原因及问题解决方案的文章就介绍到这了,更多相关setInterval 不准内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！