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' )
結果: