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

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

settimeout(…, 0ms) 在 javascript 中的真正含义是什么? (事件循环解释!)

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

代码:

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

  1. 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. 1 2 4 timerStart success timerEnd

登录后复制

大问题:0ms 发生了什么?

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

javascript 的系统:事件循环

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

主要任务(同步):

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

微任务(promise):

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

任务队列(定时器,如 settimeout):

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

分解代码

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

立即学习“Java免费学习笔记(深入)”;

已创建承诺

console.log(1) 立即运行。settimeout(() => { … }, 0) 被添加到任务队列。console.log(2) 立即运行。

promise .then():

.then() 回调被添加到 微任务队列

console.log(4):

直接运行,因为它是主脚本的一部分。

微任务运行(vip)

promise 得到解决,因此 .then() 回调记录“成功”。

任务队列运行

settimeout 回调终于轮到了:记录“timerstart”和“timerend”。

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

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

所以,简单来说:

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

像这样想

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

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

最终输出回顾

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

console.log(1)(同步)console.log(2)(同步)console.log(4)(同步)来自 .then() 的“成功”(微任务)console.log(“timerstart”)(任务队列)console.log(“timerend”)(任务队列)

为什么这很重要?

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

所以下次当你看到 settimeout(() => { … }, 0) 时,请记住——这不是时间的问题,而是时间的问题。这是关于优先级

以上就是JavaScript 中 setTimeout(, ) 的真正含义是什么? (事件循环解释!)的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    来自 Lamao LiveAPI:构建超级便捷的 API 文档(下)

    2025-3-7 7:36:03

    编程技术

    如何使用序列化器从快照中删除动态值

    2025-3-7 7:36:08

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索