JS宏任务和微任务

目录

JS宏任务和微任务

1.什么是微任务和宏任务

2.JS为什么要区分微任务和宏任务

3.微任务和宏任务有哪些

4.微任务和宏任务是怎么执行的?

5.案例

案例1

案例2

案例3

案例4


JS宏任务和微任务

1.什么是微任务和宏任务

        首先,我们要先了解下 Js 。js 是一种单线程语言,简单的说就是:只有一条通道,那么在任务多的情况下,就会出现拥挤的情况,这种情况下就产生了 ‘多线程’ ,但是这种“多线程”是通过单线程模仿的,也就是假的。那么就产生了同步任务和异步任务

2.JS为什么要区分微任务和宏任务

(1)js是单线程的,但是分同步异步

(2)微任务和宏任务皆为异步任务,它们都属于一个队列

(3)先执行同步再执行异步异步遇到微任务,先执行微任务,执行完后如果没有微任务,就执行下一个宏任务,如果有微任务,就按顺序一个一个执行微任务

3.微任务和宏任务有哪些

(1)宏任务一般是:script、setTimeout、setInterval、postMessage

(2)微任务:Promise.then ES6

4.微任务和宏任务是怎么执行的?

        执行顺序 --- 先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,当所有同步代码执行完毕后,再将异步微任务从队列中调入主线程执行,微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕

这里容易产生一个错误的认识:

        就是微任务先于宏任务执行。实际上是先执行同步任务然后在执行异步任务,异步任务是分宏任务和微任务两种的

5.案例

案例1

//宏任务 放进队列
setTimeout(function(){
    console.log(1);
});
//微任务
new Promise(function(resolve){		    
    console.log(2);
    resolve();
}).then(function(){		    
    console.log(3);
}).then(function(){
    console.log(4)
}); 	
//同步代码
console.log(5);
// 2 5 3 4 1

分析:

        遇到setTimout,异步宏任务,放入宏任务队列中
        遇到new Promisenew Promise在实例化的过程中所执行的代码都是同步进行的,所以输出2

        遇到Promise.then,异步微任务,将其放入微任务队列中
        遇到同步任务console.log(5);输出5;主线程中同步任务执行完
        从微任务队列中取出任务到主线程中,输出3、 4,微任务队列为空
        从宏任务队列中取出任务到主线程中,输出1,宏任务队列为空

案例2

setTimeout(()=>{
    new Promise(resolve =>{
        resolve();
    }).then(()=>{
        console.log('test');
    });
    console.log(4);
});
new Promise(resolve => {
    resolve();
    console.log(1)
}).then( () => {
    console.log(3);
    Promise.resolve().then(() => {
        console.log('before timeout');
    }).then(() => {
        Promise.resolve().then(() => {
          console.log('also before timeout')
        })
    })
})
console.log(2);
//1,2,3,before timeout,also before timeout,4,test;

分析:

        遇到setTimeout,异步宏任务,将() => {console.log(4)}放入宏任务队列中;
        遇到new Promisenew Promise在实例化的过程中所执行的代码都是同步进行的,所以输出1
        而Promise.then,异步微任务,将其放入微任务队列
        遇到同步任务console.log(2)输出2主线程中同步任务执行完
        从微任务队列中取出任务到主线程中,输出3,此微任务中又有微任务,Promise.resolve().then(微任务a).then(微任务b),将其依次放入微任务队列中;
        从微任务队列中取出任务a到主线程中,输出 before timeout;
        从微任务队列中取出任务b到主线程中,任务b又注册了一个微任务c放入微任务队列中;
        从微任务队列中取出任务c到主线程中,输出 also before timeout;微任务队列为空
        从宏任务队列中取出任务到主线程,此任务中注册了一个微任务d,将其放入微任务队列中,接下来遇到输出4,宏任务队列为空
        从微任务队列中取出任务d到主线程 ,输出test,微任务队列为空

案例3

console.log(1)
setTimeout(function() {
    console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
    resolve(4)
})
p.then(data => {
    console.log(data)
})
console.log(3)
//1,3,4,2

分析:

        遇到同步任务console.log(1);输出1;
        遇到setTimeout 异步宏任务,放入宏任务队列中;
        遇到 Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,但由于new Promise没有输出事件,所以接着执行遇到.then
        执行.then,异步微任务,被分发到微任务Event Queue中;
        遇到同步任务console.log(3);输出3;
        主线程中同步任务执行完,从微任务队列中取出任务到主线程中,p.then 输出4,微任务执行完毕,任务队列为空;
        开始执行宏任务setTimeout 输出2,宏任务队列为空;

案例4

new Promise((resolve, reject) => {
    resolve(1)
    new Promise((resolve, reject) => {
        resolve(2)
    }).then(data => {
        console.log(data)
    })
}).then(data => {
    console.log(data)
})
console.log(3)
//3,2,1

分析:

        遇到Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,但由于new Promise没有输出事件,所以接着往下执行遇到new Promise没有输出事件再接着往下执行遇到.then,异步微任务,被分发到微任务Event Queue中,再接着 .then 放入微任务
        遇到同步任务console.log(3) 输出3,主线程中同步任务执行完;
        从微任务队列中取出任务到主线程中,输出2,1,微任务执行完毕,任务队列为空。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

White乄joker

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值