Когда requestAnimationFrame срабатывает? - PullRequest
Новая
       6

Когда requestAnimationFrame срабатывает?

0 голосов
/ 29 апреля 2018

Кажется, что 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;

Я ожидал увидеть обратный отсчет. Вместо этого я вижу только последний результат. Что мне нужно изменить, чтобы увидеть обратный отсчет?

1 Ответ

0 голосов
/ 29 апреля 2018

Что мне нужно изменить, чтобы увидеть обратный отсчет?

Много. Никогда не пытайтесь sleep синхронно. Это заблокирует все, что просто плохо. Вместо этого просто используйте async / await, который «спит» неблокирующим способом: 

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

Когда срабатывает requestAnimationFrame?

Где-то в цикле событий. Но поскольку вы блокируете браузер синхронно, он никогда не входит в цикл обработки событий, следовательно, он не меняет вывод.

PS: requestAnimationFrame, запросы один кадр анимации. Чтобы обновить интерфейс несколько раз, вам нужно вызывать его несколько раз.

...