下面这个例子是进行0-n求和，与此同时还有一个其他任务（console.log(“其他任务”)）。
来看代码：
一、传统的办法
 		let total =100
        let result  =0
        function Mysum(){
            let temp = total
            for(let i=0;i<temp;i++){
                result+=total--
                console.log(result)
            }
        }
        Mysum()
        console.log("另一个任务") 



通过代码我们可以看到，一直到求和结束之后才能执行另一个任务，这显然会影响我们后面代码的执行。下面通过宏任务和微任务的方式去修改代码，这样就不会让另一个任务一直处于等待求和的状态。
二、修改为宏任务的方式
首先将求和任务每次只进行10次计算，这样不会然后面的其他任务处于一直等待的状态。
        let total =100
        let result  =0
        function Mysum(){
            for(let i=0;i<10;i++){
                if(total<=0) break
                result+=total--
                console.log(result)
            }
            if(total>0){
                setTimeout(()=>{
                    Mysum()
                },0)
            }
        }
        Mysum()
        console.log("另一个任务") 



从结果可以看到，我们每次只进行10次的计算，然后将后续未完成的求和任务放到宏任务队列中，这样就不会一直占用执行栈，之后的同步代码（输出其他任务）可以获得执行栈的使用权限，在同步代码执行成功之后，宏任务队列中的未完成任务接着进入执行栈执行，直到完成任务为止。
三、微任务的处理方式
        let total = 100
        let result = 0
        function Mysum(){
            Promise.resolve().then(()=>{
            for(let i=0;i<=100;i++){
                result+=i
                console.log(result)
            }
            })
        }
        Mysum()
        console.log("其他任务")

这个思路和上面基本是一样的,调用函数的时候产生一个微任务，加载到微任务队列，执行同步代码输出其他任务，之后微任务队列中的求和开始执行。这个会先执行其他任务（输出其他任务），再进行求和的计算。
如果对宏任务和微任务的执行过程不清楚，可以看下面这篇博客
js中的宏任务和微任务（点我查看）

宏任务微任务同步任务执行顺序以及使用async函数的值

有道云笔记地址：http://note.youdao.com/noteshare?id=7d1ac13517dee68ff3b16e2079338bd9&sub=AB8C799DBAD64A2EBBD6FD088A00FB95

async await 使用：

使用async函数的值

let data = this.getBusinessDetail(categoryId, true);

data.then(function(val) {

    self.sealId = val.result.sealId || '';

    self.sealName = val.result.sealName || '';

});

定义async函数

async getBusinessDetail(categoryId, initData) {

try {

    const self = this;



let data = await this.axios({

    url: '/category/' + categoryId,

    method: 'get'

});

    data = data.data;

    this.sealPresence = !!data.result.sealId;

if (data.result && data.result.physicsConfig) {

    this.nodes = data.result.physicsConfig.nodes;

    let approvalProcessArr = this.nodes.filter(item => {

    return item.assignSeal;

});

if (approvalProcessArr && approvalProcessArr[0].type !== 'START') {

    this.approvalProcess = approvalProcessArr[0].name;

}

this.processShow = true;

} else {

    this.nodes = [];

    this.processShow = false;

}

if (!this.businessId) {

    this.sealId = data.result.sealId;

    this.sealName = data.result.sealName;

}

return data;

} catch (error) {

    console.log(error);

}

},

js执行顺序：

https://juejin.im/post/59e85eebf265da430d571f89

async await promise执行顺序：https://zhuanlan.zhihu.com/p/52000508?utm_source=wechat_session&utm_medium=social&utm_oi=66091162271744

宏任务、微任务、执行顺序特别全：

首先先排出宏任务队列，然后执行第一个宏任务，执行宏任务里面的微任务，第一个宏任务了里面的微任务全部结束后执行第二个宏任务then里面执行的放在同步任务之后，同步任务就是



 



https://blog.csdn.net/weixin_42420703/article/details/82790942

 

finally用法



 

 

 

 

 

 

 

宏任务微任务
执行栈中当前的任务就可以当作宏任务，宏任务是宿主源发起的比如node.js  浏览器，所以定时器属于宏任务；微任务是javascript发起的，promise是微任务；借一张循坏图：




微任务总是在宏任务之前执行；案例如下：宏任务1里面的微任务2在宏任务2前面执行，每次循坏都会寻找是否有微任务，有的话就执行完微任务，没有才去执行宏任务；

JavaScript 执行机制
JavaScript 执行机制 宏任务 微任务

结合这个

以及这个
Vue的nextTick
原理

例子

源码分析

记住网址防止走丢