js 宏任务和微任务

Posted 2022-04-13 justsmile2

1.概念：宏任务（macrotask ）和微任务（microtask ） 表示异步任务的两种分类。常见宏任务：I/O 、setTimeout、setInterval；微任务：Promise.then catch finally、process.nextTick

在挂起任务时，JS 引擎会将 所有任务 按照类别分到这两个队列中，

首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；

之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。

2.代码

2.1 基本执行顺序 

// 主线程(外层宏) -  微  -  宏
//  1  1.1  -  2  -  3     
setTimeout(() => 
    console.log(‘3‘)
, 0)
console.log(‘1‘);

new Promise((resolve) => 
    console.log(‘1.1‘);
    resolve()
).then(() => 
    console.log(‘2‘);
).then(()=>
    console.log(‘2.1‘)
)

View Code

setTimeout(_ => console.log(4))

new Promise(resolve => 
  resolve()
  console.log(1)
).then(_ => 
  console.log(3)
)

console.log(2)

View Code

 

2.2 深度解析案例 ：单组依次执行

console.log(‘1‘);
setTimeout(function() 
    console.log(‘3‘);
    new Promise(function(resolve) 
        console.log(‘3.1‘);
        resolve();
    ).then(function() 
        console.log(‘4‘)
    )
)

new Promise(function(resolve) 
    console.log(‘1.1‘);
    resolve();
).then(function() 
    console.log(‘2‘)
)

setTimeout(function() 
    console.log(‘5‘);
    new Promise(function(resolve) 
        console.log(‘5.1‘);
        resolve();
    ).then(function() 
        console.log(‘6‘)
    )
)

View Code

 2.3 promise ES5实现

function MyPromise(fn) 
    var value = null,
        callbacks = [];
    this.then = function (onFulfilled) 
        callbacks.push(onFulfilled);
        return this;
    ;
    function resolve(value) 
        setTimeout(function () 
            callbacks.forEach(function (callback) 
                callback(value);
            );
        ,0)
    
    fn(resolve);



function test() 
    return new MyPromise(function(resolve) 
        console.log(‘1‘);
        resolve();
    )


test().then(function(resolve) 
    console.log(‘2‘);
).then(function(resolve) 
    console.log(‘3‘);
);

View Code

 

 

3.相关文章

js 宏任务和微任务介绍及实例讲解

js 宏任务和微任务

彻底理解setTimeout()