queueMicrotask - usage in synthetic events

queueMicrotask.js

// see: https://twitter.com/diegohaz/status/1530662445240426496

const anotherElement = document.querySelector('#anotherElement');

function onClick() {
  // BAD - Focus will fire on another element before the
  // click event finishes bubbling. You may get events
  // in the wrong order on parent elements.
  anotherElement.focus();

  // GOOD - By queuing a microtask, the click event will be
  // completely done when the focus event fires.
  queueMicrotask(() => {
    anotherElement.focus();
  });
}

A promise that resolves immediately is the same as queueMicrotask:

Promise.resolve().then(callback)

setTimeout is totally different. It will happen after the browser paint.

A microtask is a kind of synchronous code executed at the end of the current running stack and synthetic events. Native even bubbling occurs after.