WorkerGlobalScope: queueMicrotask() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

メモ: この機能はウェブワーカー内でのみ利用可能です。

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

マイクロタスク (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"));
 });
 }
};