Javascript 中的事件循环都有哪些内容？ [复制]

Posted 2023-03-07

【中文标题】Javascript 中的事件循环都有哪些内容？ [复制]

【英文标题】：What goes into the event loop in Javascript? [duplicate]Javascript 中的事件循环有哪些内容？ [复制]

【发布时间】：2021-02-06 19:48:07

【问题描述】：

我知道 javascript 是单线程的，这意味着 javascript 运行时（浏览器或 Node 等）会将耗时任务发送到事件循环，以便执行顺利运行而不会阻塞它拥有的线程。但是我对运行时如何决定事件循环的内容有点困惑。 （进入事件循环必须做一些代码块）。这可能是因为我缺乏理解，但无论如何我会用一个例子来详细说明我的问题。

function first() 
 console.log('first');


function second() 
 console.log('second');


first()
let i=0;
while(i<1000000000000)
 i++

second();

在这个 senario 控制台中打印“第一”，然后花费大量时间（可能卡住）并打印“第二”。这样while代码块就不会进入事件循环。

function first() 
 console.log('first');


function second() 
 console.log('second');


first()
setTimeout(()=>,500000);
second();

这里不是这样，首先它打印'first'然后将setTimeout加载到堆栈中，但这需要时间，所以将它移动到事件循环中，继续线程，并打印'second'。 500000 毫秒后，setTime 将返回调用堆栈，从而返回线程。

所以我想知道为什么“while 块”不进入事件循环但 setTimeout 会。是因为，setTimeout 是异步调用吗？ 但运行时仍然如何知道它是异步的？

【问题讨论】：

setTimeout(500000); setTimeout(second, 500000) 现在等待 8.3 分钟

***.com/questions/28650804/…

"运行时会将计时任务发送到事件循环" - 否。有一些任务可以在后台“执行”，例如等待计时器或网络响应，只有当这些完成后，进入事件队列的任务才会执行为事件。

Runtime 知道你调用了 setTimeout。无论您作为参数传递什么，都将以异步方式执行。

谢谢各位，现在更清楚了！！

【参考方案1】：

好的，首先：JavaScript 引擎对setTimeout 函数一无所知。在高层次上，JavaScript 引擎只有一个调用栈和一个用于内存管理的堆。 setTimeout 不是 JavaScript 引擎的一部分，它与浏览器的 Web API 一起提供。 setTimeout 永远不会进入调用堆栈，它的回调函数会在适当的时间进入。

当你调用一个setTimeout时，浏览器会为它创建一个定时器并将其放入内存中，当定时器结束时，浏览器会抓取它的回调函数并将其放入事件循环任务队列中，而不是放入JavaScript 引擎调用栈。因此，事件循环实际上所做的就是不断地观察 JavaScrip 调用堆栈，当调用堆栈为空时，它会抓取其任务队列中的第一个任务并放入调用堆栈。

所以，假设您有以下代码：

function first() 
 console.log('first');


function second() 
 console.log('second');


first()
setTimeout(()=>,500000);
second();

1st：函数first被添加到JavaScript调用栈中，它输出一个console.log，然后，first函数是从调用堆栈中删除。

第二次：浏览器在其 Web API 引擎中添加 setTimeout，并为其创建一个计时器（500 秒）。

3rd:函数second被添加到JavaScript调用栈，它输出一个console.log，然后从调用栈中移除。

4th：当上一个定时器结束时，浏览器将setTimeout的回调函数（不是setTimeout本身）放入事件循环任务队列中，准备运行.

5th：事件循环查看调用堆栈并等待直到调用堆栈为空。好的，它是空的，所以事件循环将任务放入调用堆栈并执行。

setTimeout 计时器为零的情况也是如此。

setTimeout(()=>,0);

如果调用堆栈有很多任务，setTimeout 回调函数可以等待比它的计时器（第二个参数）更多的时间

请注意，setTimeout 不是时间保证，而是最短时间。

这是关于事件循环的great lecture。

【讨论】：

啊，现在我明白了。我对这种事件循环机制感到非常困惑。这是一个完美的答案。谢谢！！。

不客气，兄弟。我强烈建议您查看链接中的讲座。

"所以，事件循环实际上所做的是不断观察 JavaScrip 调用堆栈，当调用堆栈为空时，它会抓取其任务队列中的第一个任务并放入调用stack." JS 没那么重要，除了 JS 执行之外，事件循环还有很多其他任务要处理。还有一个优先级系统，所以他们会执行他们当时调暗的更重要的一个任务队列中的第一个任务，而不仅仅是第一个。

你说得对@Kaiido，我想在这里保持概念简单。但实际上，有任务、微任务和渲染器任务队列，每一种都有自己的行为。此外，事件循环在 Chrome、Safari、Firefox 和 Edge 中以不同的方式处理 requestAnimationFrame。在这个领域有很多东西需要探索。