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 demo。

所有requestAnimationFrame都会调用update()函数再次运行，因此每次time++函数运行时，使用update()都会增加该值。如果在time函数中声明update()变量，它将永远不会递增，因为每次update()函数运行时它都会被创建为new。

如果你想阅读requestAnimationFrame，你可以查看这个documentation page。

希望这可以帮助 ：）