Open dashengzi66 opened 3 years ago
dashengzi66
commented
3 years ago 练习题1
new Promise(resolve=>{
console.log('promise1');
resolve();
}).then(()=>{
console.log('then11');
new Promise(resolve=>{
console.log('promise2');
resolve();
}).then(()=>{
console.log('then21');
}).then(()=>{
console.log('then22');
})
}).then(()=>{
console.log('then12');
})
//执行结果：promise1->then11->promise2->then21->then12->then22练习题 2 文章来源：https://juejin.cn/post/6994609420495765540
<script>
// 宏任务 与 微任务 示例
setTimeout(() => {
console.log('set-1')
})
setTimeout(() => {
console.log('set-2')
}, 100)
setTimeout(() => {
console.log('set-3')
}, 10)
const pro = new Promise((res, rej) => {
console.log('1');
res('2')
console.log('3')
})
pro.then(res => {
console.log("res", res)
return '4'
}).then(res => {
console.log("res", res)
})
setTimeout(() => {
pro.then((res) => {
console.log("res", res)
console.log('5')
})
console.log('7')
}, 1000)
setTimeout(async () => {
console.log('9')
const num = await pro.then((res) => {
console.log("res", res)
return '8'
});
console.log("num", num)
}, 0)
console.log('6')
</script>
练习题3
console.log('我是script开始！')
setTimeout(() => {
console.log('我是setTimeout!')
}, 0)
new Promise((resolve)=>{
console.log('我是Promise！')
resolve()
}).then(()=>{
console.log('我是Promise.then！')
})
console.log('我是script结束！')//执行结果： '我是script开始！' --> '我是Promise！' --> '我是script结束！' --> '我是Promise.then！' --> '我是setTimeout!'
dashengzi66
commented
3 years ago 
dashengzi66
commented
3 years ago 练习题4
console.log('script start');
async function async1() {
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2 end');
}
async1();
setTimeout(function () {
console.log('setTimeout');
}, 0);
new Promise(resolve => {
console.log('Promise');
resolve();
})
.then(function () {
console.log('promise1');
})
.then(function () {
console.log('promise2');
});
console.log('script end');//执行结果：script start --> async2 end --> Promise --> script end -->async1 end --> promise1 --> promise2 --> setTimeout
dashengzi66
commented
3 years ago 
plzhoupl
commented
3 years ago
定义：Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理
宏任务和微任务都属于异步任务，一个宏任务执行结束后会查看微任务队列是否为空而去决定执行微任务还是执行下一个宏任务。
在图中： 事件循环将首先检查宏任务队列，如果宏任务等待，则立即开始执行宏任务，直到该任务运行完成，（或者任务队列为空），事件循环将移动去处理微任务队列，如果有任务在该队列中等待，则事件循环将依次开始执行，完成一个后执行余下的微任务，直到队列中所有微任务执行完毕。 注意处理宏任务和微任务队列之间的区别： 单次循环迭代中，最多处理一个宏任务，（其余的再队列中等待），而队列中的所有微任务都会被处理。 当微任务队列处理完成并清空时，事件循环会检查是否需要进行更新UI渲染。如果需要则会重新渲染UI视图。 至此，当前事件循环结束，之后将会回到最初的第一个环节，再次检查宏任务队列，并开启新一轮的事件循环。
事件循环存在许多细节需要明确，如下：