requestAnimationFrame внутри Обещания - PullRequest
Новая
       41

requestAnimationFrame внутри Обещания

1 голос
/ 03 апреля 2020

Может кто-нибудь объяснить, что делает эта функция? Я понимаю, как requestAnimationFrame выполняется перед рисованием и рендерингом внутри фрейма, но я не совсем уверен, какая польза от его помещения в обещание. 

function nextFrame() {
  return new Promise(requestAnimationFrame)
}

1 Ответ

1 голос
/ 04 апреля 2020

Конструктор Promise принимает так называемую функцию executor в качестве первого аргумента, который может использоваться для управления потоком выполнения обещания. Эта функция имеет два аргумента: resolve и reject - это функции, которые вы вызываете, чтобы разрешить или отклонить обещание. 

const promise = new Promise(function executor(resolve, reject) {
   resolve();
   // reject();
});

Эта executor функция вызывается внутри автоматически при создании нового Обещание с использованием new Promise(executor).

Далее, requestAnimationFrame требует обратного вызова, который запускается всякий раз, когда браузер готов выполнить код вашего кадра. 

requestAnimationFrame(function frameCallback(timestamp) {
    // ...frame code
});

Если вы пытаетесь наложить requestAnimationFrame(frameCallback) подпись поверх executor(resolve, reject) подписи, затем

  • requestAnimationFrame is executor function
  • frameCallback is resolve function

Чтобы собрать все вместе, используйте new Promise(requestAnimationFrame)

  1. Конструктор Promise внутренне вызывает исполнителя (в данном случае requestAnimationFrame). Когда вызывается requestAnimationFrame, браузер внутренне планирует его как запрос анимации.
  2. Когда браузер готов анимировать запрошенный кадр, он вызывает обратный вызов, предоставленный requestAnimationFrame. В нашем случае resolve служит обратным вызовом. Кроме того, resolve будет передано с отметкой времени от requestAnimationFrame, т. Е. Обещание будет разрешено со значением отметки времени.

Полагаю, этот код можно использовать для Promise-ify requestAnimationFrame, Завершенное обещание будет выполнено, как только будет вызван обратный вызов requestAnimationFrame. 

const promise = new Promise(requestAnimationFrame);
promise.then(function frameCallback(timestamp) => {
  // ... frame code
});
...