Window: queueMicrotask() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年7月⁩.

queueMicrotask() は Window インターフェイスのメソッドで、ブラウザーのイベントループへ制御が戻る前の安全なタイミングで実行されるマイクロタスクをキューに入れます。

マイクロタスク (microtask) とは、現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る短い関数です。

これを利用すると他の（優先度が高いであろう）保留中のコードへ干渉することなく、ブラウザーが実行コンテキストの制御を取り戻す前に完了させたい処理を走らせることができます。マイクロタスクの使い方や使う理由についてはマイクロタスクのガイドで詳しく学ぶことができます。

マイクロタスクの重要性はタスクを非同期かつ指定の順序で実行することです。詳しくはJavaScript で queueMicrotask() によるマイクロタスクの使用をご覧ください。

マイクロタスクはライブラリーやフレームワークで必要なクリーンアップなど、描画直前のタスクに特に有用です。

構文

queueMicrotask(callback)

引数

callback: コードを呼んでも安全だとブラウザーエンジンが判断したときに実行される 関数 。キューに入れられたマイクロタスクは全ての保留中のタスクが完了した後、制御をブラウザーのイベントループへ渡す前に実行されます。

返値

なし (undefined)。

例

queueMicrotask(() => {
  // ここに関数の内容
});

queueMicrotask の仕様書より

MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this._setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        this._cache[url] = data;
        this._setData(data);
        this.dispatchEvent(new Event("load"));
      });
  }
};