首页 > web前端 > js教程 > javascript中事件循环(Event Loop)的执行顺序

javascript中事件循环(Event Loop)的执行顺序

不言
发布: 2018-10-27 14:00:10
转载
2612 人浏览过

本篇文章给大家带来的内容是关于javascript中事件循环(Event Loop)的执行顺序,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

简要介绍:谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序

问题的来源

event loop都不陌生,是指主线程从“任务队列”中循环读取任务,比如

例1:

setTimeout(function(){console.log(1)},0);

console.log(2)

//输出2,1
登录后复制

在上述的例子中,我们明白首先执行主线程中的同步任务,当主线程任务执行完毕后,再从event loop中读取任务,因此先输出2,再输出1。

event loop读取任务的先后顺序,取决于任务队列(Job queue)中对于不同任务读取规则的限定。比如下面一个例子:

例2:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3
登录后复制

先输出1,没有问题,因为是同步任务在主线程中优先执行,这里的问题是setTimeout和Promise.then任务的执行优先级是如何定义的。

执行顺序

在Job queue中的队列分为两种类型:macro-task和microTask。我们举例来看执行顺序的规定,我们设

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3
登录后复制

执行顺序为,首先执行marco-task队列开头的任务,也就是 a1 (a1代表同步的主任务)任务,执行完毕后,在执行micro-task队列里的所有任务,也就是依次执行b1, b2 , b3(异步),执行完后清空micro-task中的任务,接着执行marco-task中的第二个任务(异步),依次循环。

了解完了macro-task和micro-task两种队列的执行顺序之后,我们接着来看,真实场景下这两种类型的队列里真正包含的任务(我们以node V8引擎为例),在node V8中,这两种类型的真实任务顺序如下所示:

macro-task队列真实包含任务:

script(主程序代码)[对应上方的a1],setTimeout, setInterval, setImmediate, I/O, UI rendering
登录后复制

micro-task队列真实包含任务:

process.nextTick, Promises, Object.observe, MutationObserver
登录后复制

由此我们得到的执行顺序应该为:

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering
登录后复制

在ES6中macro-task队列又称为ScriptJobs,而micro-task又称PromiseJobs

举例

(1) setTimeout和promise

例3:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});

console.log(1);
登录后复制

(2) process.nextTick和promise、setTimeout

例子4:
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1
登录后复制

(3)更复杂的例子

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4
登录后复制

这些例子的原因请根据执行顺序执行判断,这里不一一解释了

以上是javascript中事件循环(Event Loop)的执行顺序的详细内容。更多信息请关注PHP中文网其他相关文章!

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