如何在JavaScript中生成执行队列

How is execution queue generated in JavaScript?

本文关键字：执行 队列 JavaScript      更新时间：2023-09-26

考虑这个简单的例子：

console.log('Start');
setTimeout(function() {
  console.log('First timeout');
}, 100);
setTimeout(function () {
  console.log('Second timeout');
}, 2000);
var time = Date.now();
for (var i = 0; i < 2000000000; i++) {
  var temp = i * i * Math.sqrt(i);
  temp = temp + temp;
}
console.log(Date.now() - time);
setTimeout(function () {
  console.log('Third timeout');
}, 50);
console.log('End');

输出为：

Start
1219
End
First timeout
Third timeout
Second timeout

是什么让我想到了执行队列（堆栈？）的生成方式。JavaScript interpreter首先检查代码，生成队列，然后开始执行，当超时时间过去时，将函数从超时添加到队列的末尾（所以我们有预生成的执行队列，它在执行过程中更新，并动态生成超时列表），我说得对吗？

JavaScript是单线程的。超时调用被推送到事件循环，因此它们在所有主流调用之后执行。

console.log('Start');  **-> Printed #1 **
setTimeout(function() {
  console.log('First timeout');    **-> Pushed to eventloop #1 **
}, 100);
setTimeout(function () {
  console.log('Second timeout');**-> Pushed to eventloop  #3 !! **
}, 2000);
var time = Date.now();
for (var i = 0; i < 2000000000; i++) {
  var temp = i * i * Math.sqrt(i);
  temp = temp + temp;
}
console.log(Date.now() - time); **-> Printed #2 **
setTimeout(function () {
  console.log('Third timeout');  **-> Pushed to eventloop #2 !!**
}, 50);
console.log('End'); **-> Printed #3 **

注意："第三次超时"被推到了事件循环#2而不是#1，尽管它有50ms比100ms（第一次），因为它是在你长时间等待循环后处理的，这需要足够的时间才能达到第一次的超时。

EventLoop解释道：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

相关文章：