码迷,mamicode.com
首页 > Web开发 > 详细

js 宏任务和微任务

时间:2019-07-14 20:08:15      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:open   www   div   int   proc   两种   实例   tin   his   

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

 

js 宏任务和微任务

标签:open   www   div   int   proc   两种   实例   tin   his   

原文地址:https://www.cnblogs.com/justSmile2/p/11185045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!