15-what-worked.md

What worked, what did not?

Trick: requestAnimationFrame + setTimeout, a simple polyfill for requestPostAnimationFrame.

Answer

function afterNextPaint(callback) {
  requestAnimationFrame(() => {
    setTimeout(callback, 0);
  });
}

button.addEventListener("click", () => {
  score.incrementAndUpdateUI();

  afterNextPaint(() => {
    blockFor(1000);
  });
});

Alternatively:

Answer

function afterNextPaint(callback) {
  requestAnimationFrame(() => {
    setTimeout(callback, 0);
  });
}

async function nextPaint() {
  return new Promise(resolve => afterNextPaint(resolve));
}

button.addEventListener("click", async () => {
  score.incrementAndUpdateUI();

  await nextPaint();
  blockFor(1000);
});

Next: Mid-point summary