首页 > web前端 > js教程 > setTimeout(..., ) 在 JavaScript 中的真正含义是什么? (事件循环解释!)

setTimeout(..., ) 在 JavaScript 中的真正含义是什么? (事件循环解释!)

DDD
发布: 2024-12-15 04:07:08
原创
726 人浏览过

What Does setTimeout(..., ) Really Mean in JavaScript? (Event Loop Explained!)

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 不仅仅直接运行代码,它还有一个名为 事件循环 的很酷的系统来处理任务。像这样想一下:

  1. 主要任务(同步):

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

  2. 微任务(Promise):

    接下来是承诺,甚至在计时器之前。就像他们有一张 VIP 票一样。

  3. 任务队列(定时器,如 setTimeout):

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


分解代码

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

  1. 已创建承诺

    • console.log(1) 立即运行。
    • setTimeout(() => { ... }, 0) 被添加到任务队列
    • console.log(2) 立即运行。
  2. Promise .then():

    • .then() 回调被添加到 微任务队列
  3. console.log(4):

    • 直接运行,因为它是主脚本的一部分。
  4. 微任务运行(VIP)

    • promise 得到解决,因此 .then() 回调记录“成功”。
  5. 任务队列运行

    • setTimeout 回调终于轮到了:记录“timerStart”和“timerEnd”。

为什么 0ms 不代表“现在”?

即使你说 0ms,setTimeout 也是总是延迟。不管怎样,JavaScript 都会将其推送到任务队列。在接触任务队列之前,系统首先清除所有同步任务和微任务(promise)。

所以,简单来说:

0 毫秒与时间无关,而是与等待轮到有关。


像这样想

想象一下您正在排队等待过山车:

  1. 同步码:购买快速通道票的人——他们是第一,毫无争议。
  2. 承诺:持有 VIP 通行证的人——即使迟到,他们也是下一个排队的人。
  3. 计时器(如 setTimeout):没有通行证的普通人。即使你告诉他们“0毫秒等待”,他们仍然必须站在常规队列中。

最终输出回顾

以下是我们代码中的事件顺序:

  1. console.log(1)(同步)
  2. console.log(2)(同步)
  3. console.log(4)(同步)
  4. 来自 .then() 的“成功”(微任务)
  5. console.log("timerStart")(任务队列)
  6. console.log("timerEnd")(任务队列)

为什么这很重要?

了解 0ms 的真正工作原理可以帮助您编写更好的异步代码。当你的朋友调试 JavaScript 中的随机延迟时,向他们解释这也是一个很酷的技巧。

所以下次你看到 setTimeout(() => { ... }, 0) 时,请记住——这与时间无关,而与时间有关。这是关于优先级

以上是setTimeout(..., ) 在 JavaScript 中的真正含义是什么? (事件循环解释!)的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板