queueMicrotask()

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

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

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

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

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

構文

js
queueMicrotask(callback);

引数

callback

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

戻値

undefined

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

queueMicrotask の仕様書より:

js
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"));
      });
  }
};

queueMicrotask() が利用できない場合

以下のコードは基本的にはモダンエンジンの queueMicrotask() のモンキーパッチです。即時解決される promise を用いてマイクロタスクを生成します。

js
if (typeof self.queueMicrotask !== "function") {
  self.queueMicrotask = function (callback) {
    Promise.resolve()
      .then(callback)
      .catch((e) =>
        setTimeout(() => {
          throw e;
        }),
      ); // 例外を通知
  };
}

仕様書

Specification
HTML
# microtask-queuing

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
queueMicrotask

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報