在 JavaScript 中，如果希望一段任务每隔一定时间重复执行，同时又不影响页面交互，就不能简单地在 for 或 while 循环里加入时间判断。因为 JavaScript 主线程执行模型是单线程的，任何占满 CPU 的忙等都会阻断事件队列里的所有任务。实现非阻塞式循环延迟的关键在于把等待时间归还给事件循环，让浏览器或 Node.js 在间隔期间能够处理渲染、网络和用户输入。
要理解正确实现方式，先要搞清楚为什么同步循环中的延迟会带来严重问题。之后可以分别使用定时器递归和 async/await 来构建易读且可控制的延迟循环。在实际轮询任务中，还需要考虑任务取消、防重入和间隔漂移等情况。
一、忙等循环为什么会让页面卡死
在主线程上使用同步循环实现延迟，最常见的写法是记录开始时间，然后不断读取当前时间直到差值达到目标。代码看起来没问题，实际运行却会让页面完全无法操作。原因是 JavaScript 的执行模型是单线程且基于事件循环，同步代码一旦进入循环就不会让出控制权。浏览器要处理的渲染、用户点击、网络回调等任务都排在任务队列中，必须等当前同步代码执行完毕才能获得机会。
更具体地说，while (Date.now() - start < 1000) 这行判断会在 1 秒内被执行几万甚至几十万次，每次只是简单地消耗 CPU。这种忙等没有真正把间隔时间交给引擎调度，而是通过高频无效计算占满主线程。最终结果就是定时器事件和界面刷新被推迟，直到整个循环结束才一次性执行。
// 错误：忙等循环会卡死主线程
let count = 0;
while (count < 5) {
const start = Date.now();
while (Date.now() - start < 1000) {
// 单纯占用 CPU，不处理任何事件
}
console.log('第 ' + (count + 1) + ' 次执行');
count++;
}
因此，非阻塞式循环延迟的核心不是让循环跳过时间，而是取消同步占用，把下一次执行交给定时器或异步任务。这样在两次执行之间，引擎可以处理其他任务，比如渲染 DOM、响应点击或接收网络数据。
二、用 setTimeout 递归实现可停止的延迟循环
setTimeout 是非阻塞方案的基础。它不会立即执行回调，而是把回调注册到定时器阶段，等待指定时间后再放入任务队列。如果每次回调执行完毕后，再调用一次 setTimeout 安排下一次执行，就形成了串行的延迟循环。与 setInterval 相比，递归 setTimeout 有一个明显优势：下一次计时从本次回调执行完成之后才开始，因此不会因为单次执行时间过长而导致任务堆积。
function delayedLoop(times, interval, callback) {
let index = 0;
function step() {
if (index >= times) {
return;
}
callback(index);
index++;
setTimeout(step, interval);
}
step();
}
delayedLoop(5, 1000, function (i) {
console.log('第 ' + (i + 1) + ' 次执行');
});
在上面的实现中，step 函数先检查是否已经达到执行次数，然后执行业务回调，再通过 setTimeout 安排下一次 step。等待期间主线程完全空闲，可以继续处理用户操作。这种模式适合任务时间不确定、要求串行执行的场景。
如果只是简单地使用 setInterval，在回调执行时间大于间隔时间时，新的触发并不会等待上一次执行完成，而是会继续排队，最终可能出现多个回调同时堆积。要避免这个问题，可以在 setInterval 中加入运行标志位进行防重入。
let running = false;
setInterval(function () {
if (running) {
return;
}
running = true;
doAsyncTask()
.finally(function () {
running = false;
});
}, 1000);
这种写法能够防止上一次任务未结束时再次触发。但它的间隔仍然是固定频率触发，只是中间跳过了一部分被阻塞的触发。对于大多数需要稳定串行间隔的任务，递归 setTimeout 是更可靠的选择。
三、使用 async/await 实现更直观的顺序逻辑
如果不想手动管理递归函数，也可以借助 Promise 和 async/await 来写延迟循环。先定义一个 sleep 函数，它返回一个在指定时间后 resolve 的 Promise。然后在一个 async 函数中使用 for 循环，每次迭代都通过 await sleep(1000) 暂停当前 async 函数的执行。
const sleep = function (ms) {
return new Promise(function (resolve) {
setTimeout(resolve, ms);
});
};
(async function () {
for (let i = 0; i < 5; i++) {
console.log('第 ' + (i + 1) + ' 次执行');
await sleep(1000);
}
})();
这种写法最接近同步代码的阅读体验，但它并没有阻塞主线程。await 只是让出了当前 async 函数的执行权，等待 Promise 完成后继续。等待期间事件循环依然可以处理其他任务。因此它和 setTimeout 递归在底层本质上是类似的，只是语法更加直观。
async/await 方案还便于处理错误和清理逻辑。比如可以使用 try/catch 捕获请求异常，使用 finally 释放资源。对于需要中途停止的循环，可以在循环条件中加入外部标志变量。示例代码如下：
let stopped = false;
const sleep = function (ms) {
return new Promise(function (resolve) {
setTimeout(resolve, ms);
});
};
(async function () {
for (let i = 0; i < 100 && !stopped; i++) {
console.log('轮询第 ' + (i + 1) + ' 次');
await sleep(800);
}
})();
当外部将 stopped 设置为 true 后，下一次循环条件判断就会失败，循环停止。需要注意的是，如果当前正在等待 sleep，停止不会立即中断等待，而是要等本次 sleep 到期后才会结束循环。这在大多数场景下已经足够。
四、实际轮询场景中的取消、防重入与间隔控制
非阻塞式循环延迟经常用于定时请求接口、刷新状态或轮询后台任务。这类场景除了延迟本身，还需要考虑三个问题：任务是否可以中途停止、上一次请求未完成时是否要跳过下一次、以及如何控制实际的请求间隔。
如果使用 async/await 实现轮询，同时配合运行标志位，可以比较自然地解决防重入问题。下面是一个实际轮询函数的示例：
let timerId = null;
let running = false;
async function tick() {
if (running) {
return;
}
running = true;
try {
await fetchData();
} finally {
running = false;
}
timerId = setTimeout(tick, 2000);
}
function startPolling() {
if (timerId === null) {
timerId = setTimeout(tick, 2000);
}
}
function stopPolling() {
clearTimeout(timerId);
timerId = null;
}
这个实现中，tick 先判断 running，如果上一次请求仍在执行就直接返回。这样使用 setTimeout 递归时，即使由于某些原因出现重叠调用，也能保证串行任务不会重复进入。请求完成后在 finally 中复位标志，并安排下一次执行。外部通过 startPolling 和 stopPolling 控制启停。
相比 setInterval，这种递归方式下，如果 fetchData 执行时间超过了 2 秒，下一次延迟会从请求结束后开始重新计算，而不是固定从上次开始时间计算。这种动态间隔更适合接口轮询，因为用户可以避免在服务器尚未返回时就再发起大量请求。
五、常见误区与选型建议
一个常见误区是在同步循环里直接调用 setTimeout，认为这样可以批量创建按顺序执行的延迟任务。实际上，setTimeout 是非阻塞的，循环会立即创建所有定时器，而不是等前一个执行完再创建下一个。以下代码会在几乎同一时间创建 5 个定时器，只是各自等待时间不同。
for (let i = 0; i < 5; i++) {
setTimeout(function () {
console.log('第 ' + (i + 1) + ' 个任务执行');
}, i * 1000);
}
如果希望严格按顺序执行，且每次之间间隔固定，就必须使用递归 setTimeout 或 async/await 的串行循环。另一个常见误区是在数组的 forEach 中使用 await，但 forEach 的回调不是 async 函数，也不会等待异步操作完成。此时应改用 for...of 或普通 for 循环。
在选型上，如果只是需要固定频率触发简单任务，可以使用 setInterval 并加上防重入标志。如果任务执行时间不稳定，或者要求严格串行，则应选择递归 setTimeout 或 async/await。对于动画节拍，建议使用 requestAnimationFrame，因为它会跟随屏幕刷新率，通常比固定毫秒延迟更平滑。在高精度定时场景中，还可以用 performance.now() 计算漂移来修正下一次延迟时间。
总的来说，非阻塞式循环延迟的实现并不复杂，关键是理解事件循环和任务调度机制。只要避免在循环中直接忙等，并选择合适的异步工具，就能既保证延迟效果，又不影响页面或服务的整体响应能力。
非阻塞循环延迟执行JavaScript定时器修改时间：2026-08-20 08:30:21