当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript 中 setTimeout(, ) 的真正含义是什么？（事件循环解释！）

JavaScript 中 setTimeout(, ) 的真正含义是什么？（事件循环解释！）

来源：dev.to 2024-12-31 17:43:02 0浏览收藏

你在学习文章相关的知识吗？本文《JavaScript 中 setTimeout(, ) 的真正含义是什么？（事件循环解释！）》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

settimeout(..., 0ms) 在 javascript 中的真正含义是什么？（事件循环解释！）

好吧，让我们用 0ms 来分解整个 settimeout 的事情。乍一看，你可能会想，“兄弟，0ms 意味着它会立即运行，对吗？”但 javascript 有它自己的氛围，0 毫秒并不像你想象的那么即时。让我们一起来解决这个问题。

代码：

这是我们正在剖析的代码：

const promise = new promise((resolve, reject) => {
  console.log(1); 
  settimeout(() => { 
    console.log("timerstart");
    resolve("success"); 
    console.log("timerend");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

输出呢？

1  
2  
4  
timerStart  
success  
timerEnd

大问题：0ms 发生了什么？

当看到settimeout(() => { ... }, 0) 的时候，感觉里面的代码会在0ms后立即运行。但不，javascript 就像是，“兄弟，我有自己的系统，等你了！”

javascript 的系统：事件循环

javascript 不仅仅直接运行代码，它还有一个名为 事件循环 的很酷的系统来处理任务。像这样想一下：

主要任务（同步）:

像 console.log() 这样的东西首先运行。这些都是直接的、面对面的任务。
微任务（promise）:

接下来是承诺，甚至在计时器之前。就像他们有一张 vip 票一样。
任务队列（定时器，如 settimeout）:

计时器位于生产线的后面，仅在微任务完成后运行。即使你给它 0ms，它也会等待。

分解代码

让我们一步步看看发生了什么：

已创建承诺：
- console.log(1) 立即运行。
- settimeout(() => { ... }, 0) 被添加到任务队列。
- console.log(2) 立即运行。
promise .then():
- .then() 回调被添加到 微任务队列。
console.log(4):
- 直接运行，因为它是主脚本的一部分。
微任务运行（vip）：
- promise 得到解决，因此 .then() 回调记录“成功”。
任务队列运行：
- settimeout 回调终于轮到了：记录“timerstart”和“timerend”。