async loop with postMessage based pause (long)

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<pre id="count"></pre>

index.js

const pause = (function() {
  let reqId = 0;
  const reqs = new Map();

  window.addEventListener('message', (e) => {
    const resolve = reqs.get(e.data);
    if (resolve) {
      reqs.delete(e.data);
      resolve();
    }
  });

  return _ => new Promise(resolve => {
    const id = reqId++;
    reqs.set(id, resolve);
    window.postMessage(id);
  });
})();

(async function() {

  const countElem = document.querySelector('#count');
  const start = performance.now();
  const limit = 10000000;
  for (let i = 0; i < limit; ++i) {
    countElem.textContent = `${i + 1} / ${limit}`;
    await pause();
  }
  const end = performance.now();
  console.log(`elapsed time: ${((end - start) / 1000).toFixed(2)} seconds`);

})();

jsGist.json

{"name":"async loop with postMessage based pause (long)","settings":{},"filenames":["index.html","index.css","index.js"]}