Promise的宏任务与微任务

先看例子:

new Promise(function(resolve, reject) {
    console.log(1);
    setTimeout(function() {
        console.log("First");
        resolve();
    }, 1000);
    console.log(2);

}
).then(function() {
    console.log(3);

    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log("Second");
            resolve();
        }, 4000);
    }
    );
}).then(function() {
    console.log(4);

    setTimeout(function() {
        console.log("Third");
    }, 3000);
    console.log(5);

});
console.log(0)
// 1
// 2
// 0
// undifined
// First
// 3
// Second
// 4
// 5
// Third
  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTic

执行机制1:

JS的执行机制是:

首先,判断JS是同步还是异步,同步进入主线程,异步进入Event table

其次,异步任务在Event table中注册函数,当满足特定的条件,被推入Event queue

最后,同步任务进入主线程后一直执行,直到主线程空闲后,才会去Event queue中查看是否有可执行的异步任务,如果有就推入主线程中执行。

循环以上三步执行,这就是Event loop。

执行机制2:

Promise的宏任务与微任务

 

 

执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里

当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完

这样就不难分析出上面例子的代码执行顺序。

点击查看原文

上一篇:网格 | @media.grid (Media Queries) - CSS 中文开发手册 - Break易站


下一篇:页面强行注入 jQuery