fps using async loop with postMessage based pause

README.md

fps using async loop with postMessage based pause

view on jsgist

index.css

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

index.html

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

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);
  });
})();

const r = max => Math.random() * max | 0;

const ctx = document.querySelector('canvas').getContext('2d');
function render() {
  const { width, height } = ctx.canvas;
  for (let i = 0; i < 1000; ++i) {
    ctx.fillStyle = `rgb(${r(256)} ${r(256)} ${r(256)})`;
    ctx.beginPath();
    ctx.arc(r(width), r(height), 10 + r(50), 0, Math.PI * 2);
    ctx.fill();
  }
}

(async function() {
  const countElem = document.querySelector('#count');
  for (;;) {
    const start = performance.now();
    render();
    await pause();
    const end = performance.now();
    countElem.textContent = `fps: ${(1000 / (end - start)).toFixed(4)}`;
  }
})();

jsGist.json

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