Что делает рекурсивный вызов requestAnimationFrame?
Что делает requestAnimationFrame в этом блоке кода?
tick() {
if (this.running) {
this.remaining = Math.max(0, this.end - Date.now());
requestAnimationFrame(() => this.tick());
}
}
Другими словами, в чем будет разница между приведенным выше кодом и вызовом this.tick() вне requestAnimationFrame():
tick() {
if (this.running) {
this.remaining = Math.max(0, this.end - Date.now());
this.tick()
}
}
Для справки: этот пример кода взят из примера таймера веб-компонента What is Lit.
Второй пример — чистая рекурсия, но в первом вызовы происходят асинхронно, поскольку requestAnimationFrame вызывает обратный вызов перед следующей перерисовкой. Он вызывается в рекурсивной форме для создания эффекта анимации, поскольку обратный вызов вызывается только один раз. Ссылка: Developer.mozilla.org/en-US/docs/Web/API/Window/…
Есть ли способ... "Визуализации".... с течением времени... это каким-то образом...?
Вы можете создать с его помощью базовую анимацию, чтобы увидеть ее в действии. По сути, она запускает функцию 60 раз в секунду. Именно так вы бы анимировали в <canvas> вместо использования таких хакерских вещей, как setTimeout.
Таким образом, перенос this.tick() в requestAnimationFrame замедляет скорость вызова this.tick()... Итак, каким-то образом... браузер определяет... когда должно произойти следующее событие отрисовки... и планирует следующий вызов тика... ? Есть ли более «точный» способ описать это?
Документация есть по запросу AnimationFrame . Там описывается расписание и когда...
Хорошо... В общем... если частота обновления составляет 60 Гц... Или 60 циклов в секунду... именно столько раз будет вызываться обратный вызов tick(), каждую секунду, пока анимация не завершится... и мы сделал ли это за пределами того, чтобы он вызывался с гораздо большей частотой... ?
Джейк Арчибальд сделал хорошее видео (с анимацией цикла событий): youtube.com/watch?v=cCOL7MC4Pl0
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использование рекурсии без setTimeout или requestAnimationFrame просто блокирует поток и зависает браузер. requestAnimationFrame планирует обратный вызов непосредственно перед перерисовкой обновленного DOM, и вы можете измерить FPS следующим образом:
let running = false;
let start1;
let counter = 0;
function tick() {
if (running === false) return;
counter++;
$text.textContent = Math.round(1000/(performance.now()-start1)*counter) + 'Hz'
requestAnimationFrame(tick);
}
function start() {
if (running) return;
running = true;
counter = 0;
start1 = performance.now();
tick();
}
function stop() {
$text.textContent = '';
running = false
}<button onclick = "start()">Start</button>
<button onclick = "stop()">Stop</button>
<div id = "$text"></div>
Он будет ждать следующего события рисования, чтобы снова вызвать функцию галочки. Без этого он просто заблокирует основной интерфейс, пока не произойдет переполнение стека.