WindowOrWorkerGlobalScope.queueMicrotask()

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop. The microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.

This lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the browser regains control over the execution context, potentially depending on work you need to complete. You can learn more about how to use microtasks and why you might choose to do so in our microtask guide.

The importance of microtasks comes in its ability to perform tasks asynchronously but in a specific order. See Using microtasks in JavaScript with queueMicrotask() for more details.

Microtasks are especially useful for libraries and frameworks that need to perform final cleanup or other just-before-rendering tasks.

queueMicrotask() is exposed on the WindowOrWorkerGlobalScope mixin.

Syntax

scope.queueMicrotask(function);

Parameters

function
A function to be executed when the browser engine determines it is safe to call your code. Enqueued microtasks are executed after all pending tasks have completed but before yielding control to the browser's event loop.

Return value

undefined.

Examples

self.queueMicrotask(() => {
  // function contents here
})

Taken from the queueMicrotask spec:

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

When queueMicrotask() isn't available

The code below is basically a polyfill for queueMicrotask(). It creates a microtask by using a promise that resolves immediately, falling back to using a timeout if the promise can't be created.

if (typeof window.queueMicrotask !== "function") {
  window.queueMicrotask = function (callback) {
    Promise.resolve()
      .then(callback)
      .catch(e => setTimeout(() => { throw e; }));
  };
}

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'self.queueMicrotask()' in that specification.
Living Standard Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
queueMicrotaskChrome Full support 71Edge No support NoFirefox Full support 69IE No support NoOpera Full support 58Safari Full support 12.1WebView Android Full support 71Chrome Android Full support 71Firefox Android No support NoOpera Android Full support 50Safari iOS Full support 12.2Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also