[JSログ] setTimeout、Promise、Async / Awaitの違い

1.setTimeout


console.log('1 start')	//1. 打印 script start
setTimeout(function(){
    
    
    console.log('settimeout')	// 4. 打印 settimeout
})	// 2. 调用 setTimeout 函数,并定义其完成后执行的回调函数
console.log('2 end')	//3. 打印 script start
 
 
// 输出顺序:
1 start->
2 end->
settimeout

2.約束

Promise自体は同期即時実行関数です。エグゼキュータでresolveまたはrejectを実行すると、非同期操作になります。then/ catchなどが先に実行され、resolve / rejectに格納されているメソッドがメインの後に呼び出されます。スタックが完了しました。pを実行して印刷すると、Promiseインスタンスである印刷の結果が返されます。

console.log('1 start')
let promise1 = new Promise(function (resolve) {
    
    
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    
    
    console.log('promise2')
})
setTimeout(function(){
    
    
    console.log('settimeout')
})
console.log('2 end')
 
// 输出顺序: 
1 start->
promise1->
promise1 end->
2 end->
promise2->
settimeout

JSメインスレッドがPromiseオブジェクトに対して実行されると、

  • promise1.then()のコールバックはタスクです

  • promise1が解決または拒否された場合、このタスクは現在のイベントループラウンドのマイクロタスクキューに入れられます

  • Promise1は保留中です:このタスクは、将来、イベントループの特定の(おそらく次の)ラウンドのマイクロタスクキューに配置されます

  • setTimeoutのコールバックもタスクであり、0msであってもマクロタスクキューに入れられます

3.非同期/待機

async function async1(){
    
    
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    
    
    console.log('async2')
}
 
console.log('script start');
async1();
console.log('script end')
 
// 输出顺序:
script start->
async1 start->
async2->
script end->
async1 end

async関数はPromiseオブジェクトを返します。関数が実行されると、待機が発生すると、最初に戻り、トリガーされた非同期操作が完了するまで待機してから、関数本体で次のステートメントを実行します。これは、スレッドを放棄し、非同期関数本体から飛び出すこととして理解できます。

4.イベントループ:

setTimeoutはマクロタスク
promiseであり、awaitの後にマイクロタスクが続く
ため、同期コードは最初に実行順に実行され、次にPromise、Async / Await、最後にsetTimeoutが実行されます。

5.Promise、Async / Await差异

Promiseは非同期メソッドとして解決され、マイクロタスクチームで実行されますが、解決の前後の通常のコードは同期コードです。Async/ AwaitはPromiseを返し、待機の順序は右から左、つまりたとえば、awaitは右側にあります。このメソッドは、同期コードの実行を優先し、スレッドを放棄してマイクロタスクキューに入ります。awaitの下のコードは、promiseのコードとして理解できます。

async function async1() {
    
    
   console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}

async function async2() {
    
    
    console.log( 'async2' )
}

console.log( 'script start' )

setTimeout( function () {
    
    
    console.log( 'setTimeout' )
}, 0 )

async1();

new Promise( function ( resolve ) {
    
    
    console.log( 'promise1' )
    resolve();
} ).then( function () {
    
    
    console.log( 'promise2' )
} )

console.log( 'script end' )

結果:
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/u013034585/article/details/106130379