在 setTimeout 设置中理解 JavaScript 异步执行机制

2023-10-24 20:08:56

在这个信息时代，我们每天都会在各种平台上看到和使用 JavaScript，它已经成为现代 Web 开发中不可或缺的一部分。然而，许多开发人员常常会面临一个困扰：setTimeout 有时会带来意想不到的执行结果，这往往是因为我们对 JavaScript 的异步执行机制缺乏足够的理解。

在本文中，我们将通过一个小尴尬的案例，帮助大家从一个侧面理解 JavaScript 的异步执行机制，从而可以在实践中避免类似的尴尬。

JavaScript 的异步执行机制

之所以会出现 setTimeout 带来意想不到的执行结果，就是因为 JavaScript 代码在浏览器中是单线程执行的。换句话说，浏览器中只有一个主线程负责运行所有 JavaScript 代码（不考虑 Web Worker 等其他线程）。这意味着，主线程必须按照一定的顺序执行代码，并且在执行过程中不能被中断。

当主线程遇到一个异步任务（如 setTimeout）时，它会将该任务交给一个专门的事件队列（Event Queue），然后继续执行其他任务。当事件队列中的任务准备就绪时（例如，setTimeout 的延迟时间已到），它就会被移交给主线程执行。

setTimeout 的使用误区

许多开发人员错误地认为，只要在 setTimeout 中设置了一个延迟时间，那么该任务就会在延迟时间后执行。然而，事实并非如此。正如我们前面提到的，主线程仍然可能在处理其他任务，因此 setTimeout 可能会立即执行。

以下是一个典型的例子：

console.log('start');
setTimeout(() => {
  console.log('timeout');
}, 0);
console.log('end');

在浏览器控制台中执行这段代码，你会发现输出结果是：

start
timeout
end

这表明 setTimeout 并没有在延迟 0 毫秒后执行，而是立即执行了。这是因为在 setTimeout 被调用时，主线程正在执行 console.log('start')，而在 setTimeout 的回调函数准备就绪之前，主线程已经执行完了 console.log('end')。因此，setTimeout 的回调函数被立即执行了。