JavaScript -- js代码的执行顺序

原文：https://juejin.cn/post/6844903512845860872

我的简单理解：

两个队列：一个宏任务队列，一个微任务队列

一个事件循环

宏任务包括：包括整体代码script，setTimeout，setInterval， I/O

微任务包括：Promise的then\catch\finally方法

执行步骤：

最初是整个执行代码作为一个宏任务开始执行

遇到普通脚本直接执行

遇到Promise(function(resolve, reject){xxx}).then(function(result){yyy}, function(error){zzz}) 这种Promise代码，

　　则会直接执行第1个function代码xxx，

　　如果xxx代码中调用了resoleve或者reject回调，则会把对应的第2个或者第3个function加入到微任务队列

遇到setTimeout(function(){xxx}, n)，setInterval(function(){yyy}, n) 这种定时代码，则会在n秒后或者每n秒把对应的function加入到宏任务队列

当前执行的那个宏任务结束后，从微任务队列取出一个微任务执行，循环直到当前微任务队列为空

然后从宏任务队列中取出一个宏任务执行，重复上面的步骤

直到所有任务执行完成

 

console.log('1');

setTimeout(function() {
    console.log('2');
    promise.then(function(re) {
        for (let i = 0; i < 1000000000; i++) {
            
        }
        console.log('3-' + re)
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
}, 2000)

promise = new Promise(function(resolve) {
    console.log('7');
    resolve('8');
    console.log('pre 8');
})
console.log('pre 8 2');
promise.then(function(re) {
    console.log('1-' + re);
    promise.then(function(re) {
        console.log('1-1-' + re)
    });
});
console.log('hh');
promise.then(function(re) {
    console.log('2-' + re)
    promise.then(function(re) {
        console.log('2-1-' + re)
    });
});

setTimeout(function() {
    console.log('9');
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
}, 2000)

 

其他文章：

深入理解 JavaScript 事件循环，宏任务与微任务

JavaScript：彻底理解同步、异步和事件循环(Event Loop)