微任務和巨集任務
微任務和巨集任務
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');