JaveScript异步执行

目录

一、JS的执行顺序

二、JS的异步执行顺序

1.宏任务和微任务

2.实例讲解

---

一、JS的执行顺序

1. 先同步后异步
2. 异步中执行顺序是 先微任务microtask队列，再宏任务macrotask队列

这里需要我们重点记住要先微任务队列，再宏任务队列，并且都是队列，先进先出

二、JS的异步执行顺序

1.宏任务和微任务

要先弄清楚异步执行顺序是怎样的，首先我们得弄清楚什么宏任务队列和微任务队列是什么

常见的宏任务：

• script
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering
• Ajax
• DOM事件

常见的微任务：

• process.nextTick
• MutationObserver
• Promise 中的resolve，reject
• Promise.then()
• Promise.catch()
• async/await

微任务和宏任务的区别：

• 宏任务：DOM 渲染后触发
• 微任务：DOM 渲染前触发
• 微任务执行时机比宏任务要早

原因：微任务是 ES6 语法规定的，宏任务是由浏览器规定的

宏任务、微任务和 DOM 渲染的关系

1. Call Stack 清空
2. 执行当前的微任务
3. 尝试 DOM 渲染
4. 执行宏任务

2.实例讲解

建议分析代码时，直接手撕代码，这样更助于理解

异步执行时是有层级关系的，要一层一层的判断

注：

• promise和async都是同步代码，promise.then是微观，async/await之后是微观;
• await的作用：阻塞主函数的执行，直到后面的Promise函数返回结果

建议弄懂promise再来查看

题目一：

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')

执行结果为：

1. script start
2. async2 end
3. Promise
4. script end 
5. async1 end
6. promise1
7. promise2
8. setTimeout

该例较为简单，认真分析即可，不做过多讲解

题目二：

(function() {

    setTimeout(() => {
        console.log(0);
    });

    new Promise(resolve => {
        console.log(1);

        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => console.log(2));
            console.log(3);
        });

        Promise.resolve().then(() => console.log(4));

    }).then(() => {
        console.log(5);
        Promise.resolve().then(() => console.log(8)); 
        setTimeout(() => console.log(6));
    });

    console.log(7);

})();

执行结果：1、7、4、0、3、5、2、8、6

题目三

(function() {
    setTimeout(() => {
        console.log(0);
    });

    new Promise(resolve => {

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

        Promise.resolve().then(() => console.log(5));

    }).then(() => {

        console.log(6);
        Promise.resolve().then(() => console.log(7));
        setTimeout(() => console.log(8));

    });

    console.log(9);
})();

执行结果：1、9、5、0、6、2、7、4、8、3