vlambda博客
学习文章列表

【面试题】JS的EventLoop还不会?(二)




承接上一篇,更新剩下的两个题目


第三题

做下面这一题需要先知道的一个知识点

window.requestIdleCallback()方法插入一个函数,这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。

console.log(1)process.nextTick(() => { console.log(8) setTimeout(() => { console.log(9) })})setTimeout(() => { console.log(2) new Promise(() => { console.log(11) })})requestIdleCallback(() => { console.log(7)})// new Promise()属于主线程任务let promise = new Promise((resolve, reject) => { setTimeout(() => { console.log(10) }) resolve() // 这个console也属于主线程任务 console.log(4)})fn()console.log(3)promise.then(() => { console.log(12)})function fn() { console.log(6)}


解析:

  • 看到console.log,主任务,输出1

  • process.nextTick,微任务,加入队列(微任务队列 next8)

  • 看到setTimeout,宏任务,加入队列(宏任务队列 set2)

  • request是最后才会被调用的,直接无视,等全部做完再输出

  • new Promise ,主任务

    • setTimeout,宏任务,加入队列(宏任务队列 set2, set10)

    • console.log,主任务,输出4

  • 执行fn,输出6

  • 看到console.log,主任务,输出3

  • promise.then,微任务,加入队列(微任务队列 next8,then12)

  • 从头到尾执行了一圈,开始执行微任务next8,输出8

  • 执行微任务then12,输出12

  • 微任务执行完毕,执行宏任务set2

    • console.log,主任务,输出2

    • new Promise,主任务,输出11

  • 检查微任务队列,无微任务,继续执行宏任务set10,输出10

  • 检查微任务队列,无微任务,继续执行宏任务set9,输出9

  • 全部任务都执行完了,吗?

  • 还有个request别忘了,输出7


注意:因为node环境下requestIdleCallback这个方法没有,所以我只能将其先移除再输出

[Running] node "c:\Users\asus\Desktop\advert\test.js"1c:\Users\asus\Desktop\advert\test.js:14requestIdleCallback(() => {^
ReferenceError: requestIdleCallback is not defined....


答案(缺一个最后的7):

[Running] node "c:\Users\asus\Desktop\advert\test.js"1463812211109
[Done] exited with code=0 in 0.111 seconds


第四题

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') });})

这题不再解析啦,前面做了这么多,这题和前面基本上是一毛一样的,就是改了几个东西,自己做做看,只给答案了~

还不会的话从第一篇开始看:



答案(node环境下输出结果):

[Running] node "c:\Users\asus\Desktop\advert\test.js"176824359111012
[Done] exited with code=0 in 0.112 seconds


如果你从第一篇看到这里,我相信你一定对事件循环机制的题目不再惧怕。还有问题的可以私信给我,EventLoop就更到这里。希望大家多多关注【面试题】JS的EventLoop还不会?(二),点赞【面试题】JS的EventLoop还不会?(二),转发,在看