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
    评论
JavaScript ,事件循环(Event Loop)是一个非常重要的概念。事件循环是一种机制,用于执行异步任务,以保证 JavaScript 在单线程的情况下能够处理多个任务。 在事件循环,我们通常将任务分为宏任务(macro task)和微任务(micro task)两类。 宏任务是由浏览器或 Node.js 的 API 提供的异步任务,例如 setTimeout、setInterval、requestAnimationFrame、I/O 操作等。这些任务会被添加到任务队列(task queue),当主线程执行完当前任务后,会从队列取出一个宏任务执行,直到队列为空。 微任务则是在当前任务执行结束后立即执行的异步任务,例如 Promise 的回调函数、MutationObserver 的回调函数等。这些任务会被添加到微任务队列(microtask queue),当主线程执行完当前任务后,会从微任务队列按顺序取出所有任务执行,直到队列为空。 需要注意的是,微任务的执行优先级高于宏任务,也就是说,在执行宏任务过程,如果有微任务需要执行,会先执行完所有微任务,然后再执行下一个宏任务。 下面是一个示例代码,用于演示宏任务微任务的执行顺序: ```javascript console.log('start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('Promise'); }); console.log('end'); ``` 上述代码,先执行同步代码,输出 `start` 和 `end`,然后将 `setTimeout` 函数添加到宏任务队列,并将 Promise 的回调函数添加到微任务队列。最后,按顺序取出微任务队列的任务,输出 `Promise`,再取出宏任务队列的任务,输出 `setTimeout`。 输出结果如下: ``` start end Promise setTimeout ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

White乄joker

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

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

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

打赏作者

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

抵扣说明:

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

余额充值