setTimeout and queueMicrotask

by Julien Roche

HTML

<section>
  <ul>
    <li>setTimeout: <span id="setTimeout">-</span></li>
    <li>queueMicrotask: <span id="queueMicrotask">-</span></li>
  </ul>
</section>

Babel + JSX

const setTimeoutElement = document.querySelector('#setTimeout');
const queueMicrotaskElement = document.querySelector('#queueMicrotask');

const delay = 1500;

setTimeout(() => {
	setTimeoutElement.textContent = Date.now();
}, delay);

mySetTimeout(() => {
	queueMicrotaskElement.textContent = Date.now();
}, delay);


function mySetTimeout(callback, delay) {
	const timestamp = Date.now();
  const targetedTimestamp = timestamp + delay;
  
  queueMicrotask(() => {
  	const currentTimestamp = Date.now();
  
  	if (currentTimestamp <= targetedTimestamp) {
    	mySetTimeout(callback, targetedTimestamp - currentTimestamp);
    } else {
    	callback();
    }
  });
}