JavaScript 执行机制(同步、异步、宏任务、微任务)

Love The Way You Lie 2023-02-20 10:39 26阅读 0赞

*  macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
 *  micro-task(微任务)：Promise，process.nextTick
 *  Event Loop 事件循环  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70][]
 *  Event Queue 执行顺序  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70 1][]
 *  示例

console.log('1');
    setTimeout(function() { 
        console.log('2');
        process.nextTick(function() { 
            console.log('3');
        })
        new Promise(function(resolve) { 
            console.log('4');
            resolve();
        }).then(function() { 
            console.log('5')
        })
    })
    process.nextTick(function() { 
        console.log('6');
    })
    new Promise(function(resolve) { 
        console.log('7');
        resolve();
    }).then(function() { 
        console.log('8')
    })
    
    setTimeout(function() { 
        console.log('9');
        process.nextTick(function() { 
            console.log('10');
        })
        new Promise(function(resolve) { 
            console.log('11');
            resolve();
        }).then(function() { 
            console.log('12')
        })
    })

执行结果：1, 7, 6, 8, 2, 4, 3, 5, 9, 11, 10, 12

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200625225631987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200625225741344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ==,size_16,color_FFFFFF,t_70