When Does RequestAnimationFrame Fire?

It seems that requestAnimationFrame only works after first run of js code is done: https://jsfiddle.net/pn91zmpc/ var n = 0; function sleep(ms) { var date = new Da

Solution 1:

What do I need to change to see a countdown?

A lot. Never ever try to sleep in a synchronous way. This will block everything which is just bad. Instead, just use async / await, which "sleeps" in a non-blocking way:

 const sleep = ms => new Promise(res => setTimeout(res, ms));

 (async function() {
   for(let n = 0; n < 4; n++) {
     document.body.textContent = n;
     await sleep(1000);
   }
})();

---

When does requestAnimationFrame fire?

Somewhere in the event loop. But as you block the browser synchronously, it never enters the event loop, hence it doesnt change the output.

PS: requestAnimationFrame, requests one animation frame. To update the UI multiple times, you need to call it multiple times.