JavaScript-EventLoop-事件循环
程序员文章站
2022-07-10 21:35:51
2020-01-11 EventLoop-事件循环 一、学习事件循环之前,先学习几个英语词组 EventLoop 事件循环 Event Queue 事件队列 Event Table 事件表macro-task 宏任务micro-task 微任务 二、再来一道事件机制的题 console.log(1) ......
2020-01-11
eventloop-事件循环
一、学习事件循环之前,先学习几个英语词组
eventloop 事件循环 event queue 事件队列 event table 事件表
macro-task 宏任务
micro-task 微任务
二、再来一道事件机制的题
console.log(1); settimeout(() => { console.log(2); promise.resolve().then(() => { console.log(3) }); }); new promise((resolve, reject) => { console.log(4) resolve(5) }).then((data) => { console.log(data); promise.resolve().then(() => { console.log(6) }).then(() => { console.log(7) settimeout(() => { console.log(8) }, 0); }); }) settimeout(() => { console.log(9); }) console.log(10);
// 正确结果:1、4、10、5、6、7、2、3、9、8
哈哈哈,看到上边的题是不是被吓到了,小甜的老师当时发给我的时候,我也惊呆了,同步异步真的太难为我了。
当时把自己写的结果给老师发过去,然后又运行了一下,发现自己从第三个就开始错了。ok,下面就从事件循环机制开始学习,将这个题弄懂吧。
三、js事件循环、同步异步
首先,js任务执行的是单线程的,干啥都得按顺序来,后边的任务得等排队等着。但是任务分为同步和异步。
当一个任务块代码执行时,
- 遇到同步任务,就会进入主线程,
- 遇到异步任务会进入event table中注册函数,之后将函数移入到 event queue。
- 主线程内任务执行完毕,会去event queue 读取异步函数,按照顺序执行异步函数。
待这个代码块的同步任务执行完,event table会将的异步任务,也是按照顺序执行的。
图源来自 大佬的
不过还是有问题的,event queue 里,需要先执行微任务
四、js事件循环、宏任务微任务
js事件还可以分为宏任务微任务
- macro-task(宏任务):包括整体代码script,settimeout,setinterval
- micro-task(微任务):promise,process.nexttick
当一个宏任务进入主线程
- 判断这个任务是同步异步,同步执行
- 异步宏任务,放在 event queue , 异步微任务,放在 event queue
- 当主线程任务执行完毕,去event queue
- 进入event queue,判断是微任务还是宏任务,先执行微任务,再执行宏任务
图源来自大佬
五、ook,学习完事件循环,接下来咱们来解决开头的问题吧。
// macro1,同步执行,打印1 console.log(1); // macro2,异步宏任务放到 event queue ,我们标记为callback1(macro) settimeout(() => { // 同步任务 console.log(2); // 异步微任务,我们标记为callback4(micro) promise.resolve().then(() => { console.log(3) }); }); // macro3 同步宏任务 new promise((resolve, reject) => { // 同步执行,打印4 console.log(4) resolve(5) // micro1,异步微任务放到 event queue,我们标记为callback2(micro) }).then((data) => { // 同步,打印5 console.log(data); // 异步微任务,放到 event queue,我们标记为callback5(micro) promise.resolve().then(() => { console.log(6) // 异步微任务,放到 event queue,我们标记为callback6(micro) }).then(() => { console.log(7) // 异步宏任务,放到 event queue,我们标记为callback7(macro) settimeout(() => { console.log(8) }, 0); }); }) // macro4,异步宏任务放到 event queue ,我们标记为callback3(macro) settimeout(() => { console.log(9); }) // macro5,同步任务打印10 console.log(10); // 分析: // *** 进入主线程,主线程的宏任务块有5个,先执行同步任务 // 1. 【执行同步任务】 // (1).打印1,4,10 // 2. event queue 的函数有 :callback1(macro)、callback2(micro)、callback3(macro) // 3. 【先执行微任务 callback2(micro)】 // (1).执行同步任务,打印 5 ,打印console.log(data),结果是5,data是 resolve的结果 // (2).callback5(micro) // (3).callback6(micro) // (4).callback7(macro) // *** 此时已经打印出:1,4,10,5 // *** event queue 的函数依次是:callback1(macro)、callback3(macro)、callback5(micro)、callback6(micro)、callback7(macro) // *** 微任务有两个,依次执行微任务 // 4.【微任务】 // (1).callback5(micro)打印6 // (2).callback6(micro)打印7 // *** 此时已经打印出:1,4,10,5,6,7 // *** event queue 的函数依次是:callback1(macro)、callback3(macro)、callback7(macro) // *** 接下来依次执行 // 5. 【宏任务callback1(macro)】 // (1).执行同步,打印2 // (2).callback4(micro) // *** 此时已经打印出:1,4,10,5,6,7,2 // *** event queue 的函数依次是:callback3(macro)、callback7(macro)、callback4(micro) // *** 接下来先执行微任务 // 6. 【微任务callback4(micro)】 // (1).打印3 // *** 此时已经打印出:1,4,10,5,6,7,2,3 // *** event queue 的函数依次是:callback3(macro)、callback7(macro) // *** 宏任务剩下两个,接下来依次执行 // 7. 【宏任务callback3(macro)、callback7(macro)】 // (1).打印9 // (1).打印8 // *** 此时已经打印出:1,4,10,5,6,7,2,3,9,8 // *** 任务执行完毕,所有数字均已打印出来
ok ,本次学习到这里就结束啦!下面再来一道练习题吧!
console.log('1'); settimeout(function() { console.log('2'); process.nexttick(function() { console.log('3'); }) new promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) process.nexttick(function() { console.log('6'); }) new promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) settimeout(function() { console.log('9'); process.nexttick(function() { console.log('10'); }) new promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) })
如果没学会,可以去看看大佬的讲解
上一篇: layui下拉选择框select不显示
下一篇: 浅谈营销型网站SEO优化的四大禁忌