为什么在条件语句中使用Date.now()会导致无限循环？

Question

我想创建一个能够模拟5秒延迟的循环，结果却创建了一个无限循环。我不明白为什么会这样工作。

let a = Date.now() + 5000;
while(Date.now() < a) {
    console.log(1);
}

问题出在哪里？a是一个固定的值，按理说每次循环迭代时Date.now()不是应该发生变化吗？

同时，我也在想为什么即使在无限循环中，setTimeout仍然可以正常工作？它不应该只在当前执行的脚本完成后再执行吗？既然这个脚本永远不会结束，为什么setTimeout还能被调用？

setTimeout(() => {
    alert(2);
}, 2000);

let a = Date.now() + 5000;
while( Date.now() < a ) {
    console.log(1)
}

missingfaktor · Answer

我想要验证一下大家所说的这是由于“console.log”导致的问题，即你所遇到的问题是由于你的电脑在尝试处理所有这些log调用时出现了卡顿。因此，我将console.log语句注释掉，并仅在循环结束后输出一次：

let a = Date.now() + 5000;
while(Date.now() < a) {
    // console.log(1);
}

console.log('done');

看起来这段代码运行正常，在5秒后输出了'done'。

编辑：根据Pointy的提示，我觉得在此添加一个免责声明是个好主意：没有人应该采用这种类型的循环来等待某个事件的发生。实际上，若要实现延迟执行任务，请考虑使用setTimeout或Promise等异步方法。

Raynos · Answer

实际上，你的代码并没有创建一个无限循环。它会一直打印数字1，直到5秒钟过去为止。我在本地进行了测试，虽然打印速度很快，看起来像是无限循环，但实际上只要你向下滚动到控制台底部，就会发现打印最终会停止。你可以尝试将时间设置为500毫秒来观察效果。

let a = Date.now() + 500;
while(Date.now() < a) {
    console.log(1);
}
console.log("finished");

对于setTimeout为何仍能正常工作的问题，你需要理解JavaScript的内部运行机制。我推荐你观看这个视频：How JavaScript Works 🔥& Execution Context

在JavaScript中，所有需要执行的函数会被推送到调用栈（call stack）中进行执行。在这个例子中，while循环中的console.log方法就是如此。

同时，JavaScript引擎还有一个回调队列（callback queue），其中包含等待执行的回调函数，并且有一个事件循环（event loop）始终检查调用栈是否为空。如果调用栈为空（意味着可以执行下一个函数），事件循环就会从回调队列中取出一个回调函数并将其推入调用栈进行执行。

在这里，setTimeout函数有一个回调函数，一旦定时器到期，这个回调函数就会被推送到回调队列中。

你的while循环不断地将console.log推送到调用栈中快速执行。
但只要回调队列中有待执行的回调函数，并且调用栈在某个时刻变为空（即准备好执行另一个函数时），事件循环就会立即将回调函数推入调用栈执行，并从队列中移除。这个过程会持续下去，直到队列中的所有回调函数都被执行完毕。

所以，在执行顺序上，回调函数具有更高的优先级。你也可以尝试使用多个setTimeout进行实验。

希望这有助于你理解这个问题。