了解js中的同步和异步:
同步:代码自上而下有顺序的先后执行,一行一行执行。
异步:很多时候看起来像是和同步代码一起执行,相对于同步的代码一般都会最后执行。
事件循环,先执行同步 再执行异步。
事件循环:先执行一个宏任务(宏任务队列中) 再清空微任务队列中所有微任务。浏览器中一直在重复这个事情,所以叫事件循环。
第一次执行js ,整体的代码 会被当做一个 宏任务-执行。
宏任务队列 :Macrotask Queue: ajax、setTimeout、setInterval、Dom监听等
微任务队列: Microtask Queue: Promise的then回调、 Mutation Observer API、queueMicrotask
注意:每一次执行宏任务之前,都是要确保我微任务的队列是空的,也就是说从代码执行的顺序来说微任务优先于宏任务。
案例一:
//异步:
//延时器和定时器都是异步 异步操作 异步任务 --宏任务
console.log(1);//主线程
setTimeout(() => {
console.log(2);//宏任务队列
}, 0)//交给浏览器 放到最后执行
console.log(3);//主线程
//微任务队列 异步任务队列 异步操作 异步任务
queueMicrotask(function () {
console.log(4);//微任务队列
})
//1 3 4 2
案例二:
// 每一次执行宏任务之前,都是要确保我微任务的队列是空的,也就是说从代码执行的顺序来说微任务优先于宏任务。
console.log(1);
// 微任务队列(异步任务队列)--异步操作--异步任务
queueMicrotask(function(){
console.log(2);
})
// 延时器和定时器 都是异步操作--也叫异步任务--宏任务
setTimeout(() => {
console.log(3);
}, 1000);
queueMicrotask(function(){
console.log(4);
})
console.log(5);
//1 5 2 4 3
案例三:
console.log(1); //同步
//Promise.then 是微任务
new Promise(function(r) {
//同步的代码
console.log(2);
r();
}).then(function(){
//异步的代码
console.log(3);
})
console.log(4); //同步
//1 2 4 3
案例四:
// 同步
console.log(1);
// console.log(2);
// 微任务队列(异步任务队列)--异步操作--异步任务
// 延时0ms的 异步操作
queueMicrotask(function () {
console.log(4);
});
//
// 延时器和定时器 都是异步操作--也叫异步任务--宏任务
setTimeout(() => {
console.log(2);
});
setTimeout(() => {
console.log(6);
});
queueMicrotask(function () {
console.log(5);
});
console.log(3);
//1 3 4 5 2 6
案例五:
// 同步
console.log(1);
// console.log(2);
// 微任务队列(异步任务队列)--异步操作--异步任务
// 延时0ms的 异步操作
queueMicrotask(function () {
console.log(4);
});
//
// 延时器和定时器 都是异步操作--也叫异步任务--宏任务
setTimeout(() => {
console.log(2);
queueMicrotask(function () {
console.log(7);
});
});
setTimeout(() => {
console.log(6);
});
queueMicrotask(function () {
console.log(5);
});
console.log(3);
//1 3 4 5 2 7 6