宏任务与微任务面试题

宏任务与微任务面试题

对于宏任务与微任务的执行顺序问题一直都是前端面试一到过不去的坎，这东西多看是没用的，多做就是了，刷了10来到面试题，立马顿悟。 1 async function async1 () { console.log('async1 start'); await async2(); console.log('async1 end') console.log('async1 end 2') } async function async2 () { console.log('async2') } console.log('script start'); setTimeout(function () { console.log('setTimeout') }, 0); async1(); new Promise(function (resolve) { console.log('promise1'); resolve() }).then(function () { console.log('promise2') }); console.log('script end')

2

console.log('1') setTimeout(function () { console.log('2') setTimeout(function () { console.log('3') },0) new Promise(function (resolve) { console.log('4') for (let i = 0; i < 666; i++) { i == 5 && resolve() } }).then(function () { console.log('5') }) }, 0) console.log('6') new Promise(function (resolve) { console.log('7') for (let i = 0; i < 666; i++) { i == 5 && resolve() } }).then(function () { console.log('8') })

3

setTimeout(() => { console.log(4); }, 0); new Promise(resolve => { console.log(1); for (let i = 0; i < 10000; i++) { i == 9999 && resolve(); } console.log(2) }).then(() => { console.log(5) }) console.log(3)

4

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

6

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

7

async function async1() { console.log(1); const result = await async2(); console.log(3); } async function async2() { console.log(2); } Promise.resolve().then(() => { console.log(4); }); setTimeout(() => { console.log(5); }); async1(); console.log(6);

8

console.log('1'); setTimeout(function() { console.log('2'); Promise.resolve().then(function() { console.log('3'); }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) Promise.resolve().then(function() { console.log('6'); }) new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) setTimeout(function() { console.log('9'); Promise.resolve().then(function() { console.log('10'); }) new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) })

9

new Promise(function(res) { console.log(1); res(); Promise.resolve().then(function() { console.log(2); }); new Promise(function(res) { res(); }).then(function() { console.log(-1); }); console.log(0); }).then(function() { console.log(3); Promise.resolve().then(function() { console.log(4); }); }).then(function() { console.log(5); }); Promise.resolve().then(function() { console.log(6); Promise.resolve().then(function() { console.log(7); }); }); setTimeout(function() { setTimeout(function() { console.log(8); }, 0); Promise.resolve().then(function() { console.log(9); }); }, 0); setTimeout(function() { console.log(10); }, 0);

10

console.log(1); // console.log(18); // new Promise(function(res, rej) { console.log(2); // res(); }).then(function() { console.log(3); // Promise.resolve().then(function() { console.log(5); setTimeout(function() { console.log(6); // Promise.resolve().then(function() { console.log(7); }); setTimeout(function() { console.log(8); }, 0); }, 0); }); }).then(function() { console.log(4); }); new Promise(function(res) { console.log(19); // setTimeout(function() { console.log(20); // }, 0); }); Promise.resolve().then(function() { setTimeout(function() { Promise.resolve().then(function() { console.log(12); }); console.log(13); // }, 0); }); setTimeout(function() { console.log(9); // new Promise(function(res) { res(); console.log(10); }).then(function() { console.log(11); }); }); setTimeout(function() { setTimeout(function() { setTimeout(function() { Promise.resolve().then(function() { console.log(14); }); console.log(15); }, 0); console.log(16); }, 0); console.log(17); // }, 0);

11

console.log(1);// document.addEventListener("14", function () { console.log(14);// }); new Promise(function (resolve) { resolve(); console.log(2);// setTimeout(function () { console.log(3);// }, 0); Promise.resolve().then(function () { console.log(4);// setTimeout(function () { console.log(5); }, 0); setTimeout(function () { (async function () { console.log(6); return function () { console.log(7); }; })().then(function (fn) { console.log(8); fn(); }); }, 0); }); new Promise(function (resolve) { console.log(9);// resolve(); }).then(function () { new Promise(function (resolve, reject) { console.log(10); reject(); }).then(function () { setTimeout(function () { console.log(11); }, 0); console.log(12); }).catch(function () { console.log(13); var evt = new Event("14"); document.dispatchEvent(evt); }); }); }); setTimeout(function () { console.log(15); Promise.resolve().then(function () { console.log(16); }); }, 0);