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 monkey-patch for queueMicrotask()
for modern engines. It creates a microtask by using a promise that resolves immediately.
if (typeof window.queueMicrotask !== "function") { window.queueMicrotask = function (callback) { Promise.resolve() .then(callback) .catch(e => setTimeout(() => { throw e; })); // report exceptions }; }
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'self.queueMicrotask()' in that specification. |
Living Standard | Initial definition |
Browser compatibility
NOTE: data on this has been submitted; just waiting on it to be reviewed, merged, and for a new data release before it will show up here. See https://github.com/mdn/browser-compat-data/pull/4754 for PR.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
queueMicrotask | Chrome Full support 71 | Edge Full support 79 | Firefox Full support 69 | IE No support No | Opera Full support 58 | Safari Full support 12.1 | WebView Android Full support 71 | Chrome Android Full support 71 | Firefox Android No support No | Opera Android Full support 50 | Safari iOS Full support 12.2 | Samsung Internet Android Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support