js的事件执行机制(Event loop)

同步任务:执行主线程上排队执行的任务,只有前一个任务执行完毕,下一个任务才会开始执行
异步任务:不进入主线程,而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行

事件循环(Event Loop):主线程从"任务队列"中读取事件这个过程是循环不断的。

  1. 同步任务在主线程中执行,形成“执行栈”
  2. 另外还有一个异步任务队列,异步任务有了结果后,在异步任务队列放一个事件,等待执行
  3. 同步任务和异步任务进入不同的执行场所,同步任务进入执行栈,异步任务进入eventTable并注册事件
  4. 异步任务有了结果后,将事件推入异步任务队列
  5. 所有的同步任务执行完后,去异步任务队列上读取可执行的异步任务,如果有就推入主线程执行
  6. 主线程不断重复上面的步骤

异步任务又分为宏任务、微任务
宏任务:script, setTimeout,setInterval
微任务:Promise.then(),process.nextTick()
在执行一轮任务的时候,遇到宏任务会将宏任务放到宏任务队列,遇到微任务会将微任务放到微任务队列,同步任务执行完毕后执行微任务,等所有微任务执行完毕后,再执行下一轮宏任务。

const promise = new Promise((resolve,reject)=>{
    console.log(1);
    resolve();
    console.log(2);
    reject()
})
setTimeout(() => {
	console.log(5)
},0)
promise.then(() => {
	console.log(3)
}).then(()=>{
	console.log(6)
}).catch(()=>{
	console.log(7)
})
console.log(4)

执行结果:1,2,4,3,6,5

console.log(1);
new Promise(resolve => {
    resolve();
    console.log(2);
}).then(() => {
    console.log(3);
})
setTimeout(() => {
    console.log(4);
}, 0);
console.log(5);

执行结果:1,2,5,3,4

setTimeout(function() {
    console.log(1);
}, 0);
console.log(2);
async function s1() {
    console.log(7)
    await s2();
    console.log(8);
}
async function s2() {
    console.log(9);
}
s1();
new Promise((resolve, reject) => {
    console.log(3);
    resolve();
    console.log(6);
}).then(() => console.log(4))
console.log(5);

执行结果:2,7,9,3,6,5,8,4,1

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

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

Promise.resolve().then(a)
console.log(5)

执行结果:5,1,2,3

参考:
阮一峰JavaScript 运行机制详解:再谈Event Loop http://www.ruanyifeng.com/blog/2014/10/event-loop.html
彻底搞懂 JavaScript 执行机制 https://zhuanlan.zhihu.com/p/379475079

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值