JavaScript queueMicrotask()

JavaScript , .

. , .

JavaScript Mutation Observer API , . , , , Window Worker queueMicrotask() .

vs

, JavaScript , . , : JavaScript .

, , JavaScript . .

JavaScript ( , <script> ) .
. .
setTimeout() setInterval() / . .

. , .

. . JavaScript , . , .

, JavaScript . . , , .

, queueMicrotask() , . .

: , . .

, , , . JavaScript , . .

, , . ( ) , queueMicrotask() .

queueMicrotask() . . .

JavaScript Function queueMicrotask() . queueMicrotask() Window Worker .

queueMicrotask(() => {
  /*    */
});

. JavaScript , , .

, .

if...else ( ) , . .

customElement.prototype.getData = (url) => {
  if (this.cache[url]) {
    this.data = this.cache[url];
    this.dispatchEvent(new Event("load"));
  } else {
    fetch(url)
      .then((result) => result.arrayBuffer())
      .then((data) => {
        this.cache[url] = data;
        this.data = data;
        this.dispatchEvent(new Event("load"));
      });
  }
};

if...else ( ) , else .

element.addEventListener("load", () => console.log("Loaded data"));
console.log("Fetching data...");
element.getData();
console.log("Data fetched");

Fetching data...
Data fetched
Loaded data

Fetching data...
Loaded data
Data fetched

, data , .

if .

customElement.prototype.getData = (url) => {
  if (this.cache[url]) {
    queueMicrotask(() => {
      this.data = this.cache[url];
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((result) => result.arrayBuffer())
      .then((data) => {
        this.cache[url] = data;
        this.data = data;
        this.dispatchEvent(new Event("load"));
      });
  }
};

data load . (if queueMicrotask(), else fetch )

, .

const messageQueue = [];

let sendMessage = (message) => {
  messageQueue.push(message);

  if (messageQueue.length === 1) {
    queueMicrotask(() => {
      const json = JSON.stringify(messageQueue);
      messageQueue.length = 0;
      fetch("url-of-receiver", json);
    });
  }
};

sendMessage() . .

sendMessage() . JavaScript , . sendMessage() , .

. JSON.stringify() JSON . messageQueue . fetch() JSON .

sendMessage() fetch() , , .

JSON .

, .

<pre id="log"></pre>

JavaScript

let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");

queueMicrotask() . log() , .

log("  ");
queueMicrotask(() => {
  log(" .");
});
log("  ");

0 (" ") . (setTimeout() ) " ", " " .

<pre id="log"></pre>

JavaScript

let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");

queueMicrotask() . 0ms . log() , .

let callback = () => log("   .");

let urgentCallback = () => log("*** !   !");

log("  ");
setTimeout(callback, 0);
queueMicrotask(urgentCallback);
log("  ");

, , . , . , .

, queueMicrotask() . .

<pre id="log"></pre>

JavaScript

let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");

. doWork() queueMicrotask() , , .

let callback = () => log("   .");

let urgentCallback = () => log("*** !   !");

let doWork = () => {
  let result = 1;

  queueMicrotask(urgentCallback);

  for (let i = 2; i <= 10; i++) {
    result *= i;
  }
  return result;
};

log("  ");
setTimeout(callback, 0);
log(`10! ${doWork()} .`);
log("  ");

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025 6 27 by MDN contributors.

View this page on GitHub Report a problem with this content

JavaScript queueMicrotask()

In this article

vs

JavaScript

JavaScript

JavaScript

Help improve MDN