微任务和宏任务

微任务和宏任务

1. js是单线程语言,因为js是做用户交互;如果是多线程的话,那么一个线程添加,一个线程删除,就不知道执行哪一个了

 

2. js的执行流程:先同步==>后异步(你不能确定它什么时候执行的就是异步)

异步 : ajax请求 ,  事件类, 定时器, promise.then

 

3. 异步又叫事件循环(event loop)又叫事件队列 又分宏任务和微任务

微任务：promise.then 、 promise.catch

宏任务：script标签、定时器(setTimeout/setInterval)、事件

宏任务要执行,得先清空微任务

 

4. 例子:

for (var i = 0; i < 3 i++) {

    setTimeout(function(){

        console.log(i)

    })

}

得到的是  3个 3

 

例子

<script type="text/javascript" src='a.js'></script>

 

setTimeout(function(){

    console.log('定时器的aaa'); 宏任务

})

 

Promise.resolve('foo').then(res=>{

    console.log( res,'a.js的Promise' ); 微任务

})

 

console.log( 'aaa' ); 同步

 

<script type="text/javascript" src='b.js'></script> 宏任务

 

console.log( 'bbbbb' ); 同步

 

setTimeout(function(){

    console.log('定时器的bbbbb'); 宏任务

})

 

Promise.resolve('foo').then(res=>{

    console.log( res,'b.js的Promise' ); 微任务

})

 

第一种: 第二种:

console.log( 'aaa' ); console.log( 'aaa' );

console.log( res,'a.js的Promise' ); console.log( res,'a.js的Promise' );

console.log('定时器的aaa'); console.log( 'bbbbb' );

console.log( 'bbbbb' ); console.log( res,'b.js的Promise' );

console.log( res,'b.js的Promise' ); console.log('定时器的bbbbb');

console.log('定时器的bbbbb'); console.log('定时器的aaa');

 

第三种:

console.log( 'aaa' );

console.log( res,'a.js的Promise' );

console.log( 'bbbbb' );

console.log( res,'b.js的Promise' );

console.log('定时器的aaa');

console.log('定时器的bbbbb');