JavaScript 入門 queueMicrotask

はじめに

queueMicrotask は、同期コードを非同期に変換するために使用できる新しいブラウザー API です:

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
});

これは、setTimeout を使用して行っていたことと似ています:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
}, 0);

では、queueMicrotask の用途は何ですか すでに setTimeout がある場合 ?

queueMicrotask 関数 (タスク) をキューに追加し、現在のタスクが作業を完了した後、実行コンテキストの制御がブラウザーの制御に戻る前に実行を待機している他のコードがなくなった後、各関数が 1 つずつ (FIFO) 実行されます。イベントループ。

基本的に queueMicrotask のタスク 実行をイベント ループに渡す前に、現在の呼び出しスタックが空になった直後に実行されます。

setTimeoutの場合 、イベント ループに制御が渡された後、各タスクはイベント キューから実行されます。

setTimeout を実行すると 最初にqueueMicrotask 、どちらが最初に呼び出されますか?以下のコードを実行して、チェックアウトしてください:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
},0);

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
}); 

Node.js は「process.nextTick」で同じことを行います。

いつ使用するか

queueMicrotask、 をいつ使用するかについての規則はありません。 しかし、現在の実行を停止せずにコードを実行するために巧妙に使用できます。

たとえば、値のリストを保持する配列があるとします。すべての値が挿入された後、値の検索が高速になるように配列を並べ替えます。

var arr=[];

function add(value){
  arr.push(value);
  arr.sort();
}

ただし、要素の検索は、誰かが検索入力ボックスを使用するたびに行われます。これは、制御がイベント ループに転送された後にイベント ハンドラーが呼び出されることを意味するため、データを並べ替えると他の重要な同期コードの実行がブロックされます。

queueMicrotask の使い方は次のとおりです コードを改善するには:

var arr = [];

function add(value) {
  arr.push(value);
  queueMicrotask(() => {
    arr.sort();
  })
}

参考文献

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask