Viewing: developer.mozilla.org

JavaScript

JavaScript <script>
setTimeout() setInterval()

JavaScript

queueMicrotask()

JavaScript

queueMicrotask()

JavaScript (Function) queueMicrotask() Window Worker

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

JavaScript

1 if...else 1

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 1 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

2 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()

JavaScript sendMessage()

JSON.stringify() JSON messageQueue fetch() JSON

sendMessage() fetch()

JSON

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

JavaScript

const logElem = document.getElementById("log");
const log = (s) => (logElem.innerText += `${s}\n`);

queueMicrotask() log()

log("Before enqueueing the microtask");
queueMicrotask(() => {
  log("The microtask has run.");
});
log("After enqueueing the microtask");

0 setTimeout()

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

JavaScript

const logElem = document.getElementById("log");
const log = (s) => (logElem.innerText += `${s}\n`);

queueMicrotask() log()

0 log()

const callback = () => log("Regular timeout callback has run");

const urgentCallback = () => log("*** Oh noes! An urgent callback has run!");

log("Main program started");
setTimeout(callback, 0);
queueMicrotask(urgentCallback);
log("Main program exiting");

queueMicrotask()

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

JavaScript

const logElem = document.getElementById("log");
const log = (s) => (logElem.innerText += `${s}\n`);

doWork() queueMicrotask()

const callback = () => log("Regular timeout callback has run");

const urgentCallback = () => log("*** Oh noes! An urgent callback has run!");

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

  queueMicrotask(urgentCallback);

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

log("Main program started");
setTimeout(callback, 0);
log(`10! equals ${doWork()}`);
log("Main program exiting");

MDN

MDN 2025417

GitHub

JavaScript queueMicrotask()

JavaScript

JavaScript

JavaScript

MDN