Как работает requestAnimationFrame?

Question

Я новичок в программировании и сталкивался с этой функцией:

function update(time = 0) {
    console.log(time);
    requestAnimationFrame(update);
};
update();

Почему в функции мы объявляем аргумент "time = 0", но когда мы объявляем эту функцию, делаем это без аргументов?

В какой момент requestAnimationFrame назначает новое значение переменной времени?

Answer 1

Для переменной time установлено значение по умолчанию, равное 0. Обычно значением параметра по умолчанию для параметра функции является undefined, но при объявлении параметра функции с помощью param=default_val вместо этого параметра по умолчанию устанавливается значениеdefault_val если функция вызывается без параметра или параметр не определен.См. Javascript Default Function Parameters.

Функция обратного вызова, переданная в requestAnimationFrame, получает один аргумент - время, когда она была вызвана.

Время будет 0 при первом вызове update, поскольку он не был передан в качестве параметра requestAnimationFrame.После первого вызова функция передает себя в качестве обратного вызова на requestAnimationFrame, а затем функция update будет вызываться с параметром time, поэтому она не будет установлена ​​на 0.

function update(time = 0) {
    console.log('time:', time, 'elapsed time ms:', time-start);
    if(time-start<=500){
    requestAnimationFrame(update);
    }
};
var start = performance.now();
update();

Лучшим способом написания этого кода было бы использование requestAnimationFrame для вызова update вместо его ручного выполнения.Таким образом, при первом вызове функции update она будет иметь правильное значение времени, а не 0 (и не будет необходимости в параметрах функции по умолчанию для функции update).

function update(time) {
    console.log(time);
    requestAnimationFrame(update);
};
requestAnimationFrame(update);

Answer 2

Если вы хотите, чтобы переменная time подсчитывала при запуске анимации, вы можете использовать это:

let time = 0;

function update() {
  time++;
  console.log(time);
  requestAnimationFrame(update);
}

update();

Вот пример JSFiddle этого кода в действии.

Все, что делает requestAnimationFrame, вызывает функцию update() для повторного запуска, поэтому наличие time++ будет увеличивать это значение при каждом запуске функции update().Если вы объявите переменную time внутри функции update(), она никогда не будет увеличиваться, поскольку будет создаваться как новая каждый раз, когда запускается функция update().

Если вы хотите прочитать requestAnimationFrame, вы можете проверить эту страницу документации .

Надеюсь, это поможет:)