js 宏任务和微任务

谁借莪１个温暖的怀抱￠ 2021-11-17 08:38 333阅读 0赞

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

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

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

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

2.代码

2.1 基本执行顺序

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

// 主线程(外层宏) -  微  -  宏
    //  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')
    })

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

setTimeout(_ => console.log(4))
    
    new Promise(resolve => {
      resolve()
      console.log(1)
    }).then(_ => {
      console.log(3)
    })
    
    console.log(2)

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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')
        })
    })

2.3 promise ES5实现

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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');
    });

[ 更全的方式][Link 1]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

/**
     * Promise类实现原理
     * 构造函数传入一个function，有两个参数，resolve：成功回调; reject：失败回调
     * state: 状态存储 [PENDING-进行中 RESOLVED-成功 REJECTED-失败]
     * doneList: 成功处理函数列表
     * failList: 失败处理函数列表
     * done: 注册成功处理函数
     * fail: 注册失败处理函数
     * then: 同时注册成功和失败处理函数
     * always: 一个处理函数注册到成功和失败
     * resolve: 更新state为：RESOLVED，并且执行成功处理队列
     * reject: 更新state为：REJECTED，并且执行失败处理队列
    **/
    
    class PromiseNew {
      constructor(fn) {
        this.state = 'PENDING';
        this.doneList = [];
        this.failList = [];
        fn(this.resolve.bind(this), this.reject.bind(this));
      }
    
      // 注册成功处理函数
      done(handle) {
        if (typeof handle === 'function') {
          this.doneList.push(handle);
        } else {
          throw new Error('缺少回调函数');
        }
        return this;
      }
    
      // 注册失败处理函数
      fail(handle) {
        if (typeof handle === 'function') {
          this.failList.push(handle);
        } else {
          throw new Error('缺少回调函数');
        }
        return this;
      }
    
      // 同时注册成功和失败处理函数
      then(success, fail) {
        this.done(success || function () { }).fail(fail || function () { });
        return this;
      }
    
      // 一个处理函数注册到成功和失败
      always(handle) {
        this.done(handle || function () { }).fail(handle || function () { });
        return this;
      }
    
      // 更新state为：RESOLVED，并且执行成功处理队列
      resolve() {
        this.state = 'RESOLVED';
        let args = Array.prototype.slice.call(arguments);
        setTimeout(function () {
          this.doneList.forEach((item, key, arr) => {
            item.apply(null, args);
            arr.shift();
          });
        }.bind(this), 200);
      }
    
      // 更新state为：REJECTED，并且执行失败处理队列
      reject() {
        this.state = 'REJECTED';
        let args = Array.prototype.slice.call(arguments);
        setTimeout(function () {
          this.failList.forEach((item, key, arr) => {
            item.apply(null, args);
            arr.shift();
          });
        }.bind(this), 200);
      }
    }
    
    // 下面一波骚操作
    new PromiseNew((resolve, reject) => {
      resolve('hello world');
      // reject('you are err');
    }).done((res) => {
      console.log(res);
    }).fail((res) => {
      console.log(res);
    })

3.相关文章

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

[js 宏任务和微任务][js 1]

[彻底理解setTimeout()][setTimeout]

转载于:https://www.cnblogs.com/justSmile2/p/11185045.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211116/6550c0a7767743e3aecb7e58bf6d8907.png
[Link 1]: https://www.cnblogs.com/minigrasshopper/p/9141307.html
[js]: http://www.manongjc.com/article/9144.html
[js 1]: https://segmentfault.com/a/1190000018492717?utm_source=tag-newest
[setTimeout]: https://blog.csdn.net/u010885548/article/details/84848304

发表评论取消回复

表情：

评论列表（有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读

相关 Node.js---宏任务和微任务

宏任务和微任务都是异步耗时任务。宏任务有setImmediate，setTimeout，setInterval， I/O，异步ajax，文件操作等宏任务中的优

Love The Way You Lie/ 2024年04月01日 06:30/ 0 赞/ 8 阅读

相关 js中的宏任务和微任务

宏任务和微任务的关系 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

布满荆棘的人生/ 2023年01月06日 01:12/ 0 赞/ 188 阅读

相关 js异步之宏任务（marcroTask）和微任务（microTask）

js异步之宏任务（marcroTask）和微任务（microTask）先看一到面试题写出console.log的输出顺序 console.log(

我就是我/ 2022年12月25日 11:59/ 0 赞/ 127 阅读

相关 JS Event Loops 微任务宏任务

EventLoop、宏任务、微任务 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

超、凢脫俗/ 2022年12月21日 03:25/ 0 赞/ 150 阅读

相关【JS】宏任务、微任务和 Promise 的性能

[https://juejin.im/post/6854573216212451336][https_juejin.im_post_6854573216212451336]

素颜马尾好姑娘i/ 2022年12月19日 01:20/ 0 赞/ 176 阅读

相关 js异步之宏任务（marcroTask）和微任务（microTask）

先看一到面试题写出console.log的输出顺序 console.log(100); setTimeout(()=>{

系统管理员/ 2022年12月12日 04:59/ 0 赞/ 141 阅读

相关宏任务和微任务讲解

一、概念 1.宏任务MacroTask：消息队列（回调队列）中的任务称为宏任务，是由宿主环境（浏览器或者node）提供的，不断的从消息队列中取出并被事件循环执行，

你的名字/ 2022年11月18日 01:55/ 0 赞/ 210 阅读

相关前端宏任务和微任务详解

![5f83bcf7946f1524e5b6581c2b5dad10.png][] 宏任务(macro-task) 定义消息队列中的任务称为宏任务。产生

ゞ浴缸里的玫瑰/ 2022年10月27日 01:55/ 0 赞/ 317 阅读

相关 js事件循环：微任务和宏任务

事件循环：微任务和宏任务浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于事件循环的。理解事件循环的工作方式对于代码优化很重要，有时

墨蓝/ 2022年10月18日 04:54/ 0 赞/ 184 阅读

相关 js 宏任务和微任务

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

谁借莪１个温暖的怀抱￠/ 2021年11月17日 08:38/ 0 赞/ 334 阅读