河南建设信息网站,徐州土地交易网,绿色做环保网站的好处,如何自己弄一个网站借鉴#xff1a;
《Javascript 忍者秘籍》第二版#xff0c;事件循环篇
面试 | JS 事件循环 event loop 经典面试题含答案 - 知乎 (zhihu.com)
概念
主栈队列就是一个宏任务#xff0c;每一个宏任务执行完就会执行宏任务中的微任务#xff0c;直到微任务全部都执行完
《Javascript 忍者秘籍》第二版事件循环篇
面试 | JS 事件循环 event loop 经典面试题含答案 - 知乎 (zhihu.com)
概念
主栈队列就是一个宏任务每一个宏任务执行完就会执行宏任务中的微任务直到微任务全部都执行完才开始执行下一个宏任务。JS 中任务的执行顺序优先级是主栈全局任务(宏任务) 宏任务中的微任务 下一个宏任务。所以 promise(微任务).then() 的执行顺序优先级高于setTimeout定时器。不能满目的将 .then 的回调放入微任务队列因为没有调用 resolve或者reject 之前是不算异步任务完成的 所以不能将回调随意的放入微任务事件队列await 是一个让出线程的标志。await 后面的表达式会先执行一遍将 await 后面的代码加入到 micro task中这个微任务是 promise 队列中微任务然后就会跳出整个 async 函数来继续执行后面的代码。process.nextTick 是一个独立于 eventLoop 的任务队列主栈中的宏任务每一次结束后都是先执行 process.nextTick队列在执行微任务 promise 的 .then()。每一个宏任务和宏任务的微任务执行完后都会对页面 UI 进行渲染 宏任务 macrotask script 整体代码setTimeoutsetIntervalsetImmediateI/Oui render微任务 microtask process.nextTickpromise.thenawait 后面的代码MutationObserverh5新特性 为什么 await 后面的代码会进入到promise队列中的微任务
async/await 只是操作 promise 的语法糖最后的本质还是promise async function async1() {console.log(async1 start);await async2();console.log(async1 end);
}
// 上面的代码等价于
async function async1() {console.log(async1 start);Promise.resolve(async2()).then(() {console.log(async1 end)})
}
面试题
面试题1
async function async1() {console.log(1) // 2async2().then(() {console.log(2)})
}
async function async2() {console.log(3) // 3
}
console.log(4) // 1
setTimeout(function () {console.log(5)
}, 0)
async1();
new Promise(function (resolve) {console.log(6) // 4resolve();
}).then(function () {console.log(7)
})
console.log(8) // 5
//4 1 3 6 8 2 7 5面试题2 setTimeout(() {console.log(1);}, 0);async function main1() {new Promise((resolve, reject) {console.log(2);resolve();}).then(() {console.log(3);})await main2();console.log(7);}function main2() {console.log(8);}main1();setTimeout(() {console.log(10);}, 0);//
2
8
3
7
1
10面试题3
Promise.resolve().then(() {console.log(0);return Promise.resolve(4x);}).then((res) { console.log(res) })
Promise.resolve().then(() { console.log(1); }).then(() { console.log(2); }, () { console.log(2.1) }).then(() { console.log(3); }).then(() { console.log(5); }).then(() { console.log(6); })// 0 1 2 3 4x 5 6
面试题4 详解(1 封私信) 关于promise输出顺序的疑问 - 知乎 (zhihu.com)
new Promise((resolve,reject) {console.log(外部promise)resolve()
})
.then(() {console.log(外部第一个then)new Promise((resolve,reject) {console.log(内部promise)resolve()}).then(() {console.log(内部第一个then)return Promise.resolve()}).then(() {console.log(内部第二个then)})
})
.then(() {console.log(外部第二个then)
})
.then(() {console.log(外部第三个then)
})
.then(() {console.log(外部第四个then)
}) //
外部promise外部第一个then内部promise
内部第一个then
外部第二个then
外部第三个then外部第四个then内部第二个then
面试题5
// A 任务
setTimeout(() {console.log(1)
}, 20)// B 任务
setTimeout(() {console.log(2)
}, 0)// C 任务
setTimeout(() {console.log(3)
}, 10)// D
setTimeout(() {console.log(5)
}, 10)console.log(4)
/* 输出
* 4 - 2- 3 - 5 - 1
*/
面试题6
setTimeout(function () {console.log(1)
}, 0);new Promise(function (resolve, reject) {console.log(2)for (var i 0; i 10000; i) {if (i 10) {console.log(10)}i 9999 resolve();}console.log(3)
}).then(function () {console.log(4)
})
console.log(5);
// 2, 10, 3, 5, 4, 1
面试题7
console.log(start);
setTimeout(() {console.log(children2)Promise.resolve().then(() {console.log(children3)})
}, 0)new Promise(function(resolve, reject){console.log(children4)setTimeout(function(){console.log(children5)resolve(children6)}, 0)
}).then(res { // flagconsole.log(children7)setTimeout(() {console.log(res)}, 0)
})
// start children4 children2 children3 children5 children7 children6
面试题8
这道题的难点在于是 promise2还是 async1 end 先输出。从全局宏任务之上而下执行时 await async2() 后面的代码 console.log(async1 end) 先进入 promise 中的微任务队列最后.then() 中的console.log(promise2) 再进入到 promise 中的微任务队列。所以再开始下一轮宏任务循环之前先输出了 async1 end 再输出了 promise2。全局中的微任务执行完成开始下一轮宏任务setTimeout 最后输出 setTimeout。
async function async1() {console.log(async1 start)await async2()console.log(async1 end)
}
async function async2() {console.log(async2)
}
console.log(script start)
setTimeout(function () {console.log(setTimeout)
}, 0)
async1()
new Promise((resolve) {console.log(promise1)resolve()
}).then(function () {console.log(promise2)
})
console.log(script end)
//输出
//script start
//async1 start
//async2
//promise1
//script end
//async1 end
//promise2
//setTimeout
面试题9
首先开始全局下的宏任务依次输出 script start, async1 start, promise1, promise3, script end。其中 await async2();async2() 中.then()的代码先进入到promise的微任务队列await async2(); 后面的代码再进入到promise的任务队列console.log(promise4); 最后进入到 promise 的任务队列。全局下的宏任务结束开始全局下的微任务promise 的微任务队列中按照队列的先进先出原则依次输出promise2async1 endpromise4。全局微任务结束开始下一轮的宏任务setTimeout最终输出 setTimeout。
async function async1() {console.log(async1 start);await async2();console.log(async1 end);
}
async function async2() {new Promise(function (resolve) {console.log(promise1);resolve();}).then(function () {console.log(promise2);});
}
console.log(script start);
setTimeout(function () {console.log(setTimeout);
}, 0)
async1();
new Promise(function (resolve) {console.log(promise3);resolve();
}).then(function () {console.log(promise4);
});
console.log(script end);
//script start,
// async1 start,
// promise1,
// promise3,
// script end,
// promise2
// async1 end
// promise4,
// setTimeout
面试题10
async function async1() {console.log(async1 start);await async2();setTimeout(function() {console.log(setTimeout1) // 这一部分代码会放入到 promise 的微任务队列中。},0)
}
async function async2() {setTimeout(function() {console.log(setTimeout2)},0)
}
console.log(script start);
setTimeout(function() {console.log(setTimeout3);
}, 0)
async1();
new Promise(function(resolve) {console.log(promise1);resolve();
}).then(function() {console.log(promise2);
});
console.log(script end);
// script start, async1 start, promise1, script end,
// promise2, setTimeout3, setTimeout2, setTimeout1
