【面试题】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"
1
c:\Users\asus\Desktop\advert\test.js:14
requestIdleCallback(() => {
^
ReferenceError: requestIdleCallback is not defined
....
答案(缺一个最后的7):
["c:\Users\asus\Desktop\advert\test.js" ] node
1
4
6
3
8
12
2
11
10
9
[0 in 0.111 seconds ] exited with code=
第四题
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环境下输出结果):
["c:\Users\asus\Desktop\advert\test.js" ] node
1
7
6
8
2
4
3
5
9
11
10
12
[0 in 0.112 seconds ] exited with code=
如果你从第一篇看到这里,我相信你一定对事件循环机制的题目不再惧怕。还有问题的可以私信给我,EventLoop就更到这里。希望大家多多关注,点赞,转发,在看