Как работает cancelAnimationFrame, когда идентификаторы продолжают увеличиваться? - PullRequest
Новая
       86

Как работает cancelAnimationFrame, когда идентификаторы продолжают увеличиваться?

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

Фон:

При использовании setInterval или setTimeout мы получаем один Id для отмены / сброса действий.

setInterval / setTimeout: 

const timeoutId = setTimeout(() => {clearTimeout(timeoutId)}, 1000);
const intervalId = setInterval(() => {clearInterval(intervalId)}, 1000);

requestAnimationFrame: При использовании raf для каждой итерации шага мы сбрасываем rafId и вызываем cancelAnimationFrame только для последнего rafId?

let rafId;

function step(timestamp) {
  rafId = requestAnimationFrame(step);
  console.log(timestamp, rafId)
  if(timestamp >= 1000) {
    cancelAnimationFrame(rafId);
  }
}
rafId = requestAnimationFrame(step);

Вопрос: Каким образом cancelAnimationFrame закрывает все предыдущие вызовы requestAnimationFrame, когда rafId постоянно обновляется?

У меня есть предположение, что cancelAnimationFrame работает от frameId и закрывает все, что за ним.

Если это правда, как это работает с несколькими requestAnimationFrames (поскольку они будут делитьсяframeIds)

1 Ответ

1 голос
/ 29 апреля 2019

Это правда, что id, который возвращает requestAnimationFrame, постоянно увеличивается на единицу, но это не имеет значения.Чтобы сохранить запрос «живым», вам необходимо повторно запросить его внутри обратного вызова.Давайте посмотрим, что произойдет в последний раз при выполнении шага функции обратного вызова: 

function step(timestamp) {
  console.log("before " + rafId);
  rafId = requestAnimationFrame(step);
  console.log("after " + rafId);
  if (timestamp >= 1000) {
    cancelAnimationFrame(rafId);
  }
}
rafId = requestAnimationFrame(step);

, если вы посмотрите на две последние строки в консоли, это будет что-то вроде:

до 50

после 51

Это означает, что идентификатор, возвращенный из последнего обратного вызова, был 50, и теперь мы запрашиваем новый анимационный кадр, который получает идентификатор 51.На этот раз наше условие if истинно, поэтому он отменяет запрос идентификатора 51. Запрос идентификатора 50 завершен, поскольку была вызвана функция обратного вызова, поэтому отменить его не нужно.

...