requestAnimationFrame 什么时候触发？

Question

requestAnimationFrame 似乎只有在第一个运行 js 代码完成后才有效： https://jsfiddle.net/pn91zmpc/

    var n = 0;

    function sleep(ms) {
        var date = new Date();
        var curDate = null;
        do { curDate = new Date(); }
        while (curDate - date < ms);
    }

    function refresh() {
         var body = document.getElementsByTagName("body")[0];
       body.textContent = n;
    }

    n=0;
    window.requestAnimationFrame(refresh);
    n = n+1;
    sleep(2000);
    n = n+1;
    sleep(2000);
    n = n+1;

我希望看到倒计时。相反，我只看到最后的结果。我需要更改什么才能看到倒计时？

Answer 1

What do I need to change to see a countdown?

很多。永远不要尝试以同步方式 sleep 。这将阻止一切不好的事情。相反，只需以非阻塞方式使用 async / await，其中 "sleeps"：

 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?

事件循环中的某处。但是当你同步阻塞浏览器时，它永远不会进入事件循环，因此它不会改变输出。

PS：requestAnimationFrame，请求一个动画帧。要多次更新UI，需要多次调用它。

requestAnimationFrame 什么时候触发？

When does requestAnimationFrame fire?

javascript

requestanimationframe