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()函数运行时都会将其创建为新变量。

如果您想阅读requestAnimationFrame，可以查看此documentation page。

希望这会有所帮助：）

requestAnimationFrame如何工作？

2 个答案: