javascript - requestAnimationFrame 是如何工作的？

Question

我是编程新手，面对这个功能:

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

为什么在函数中我们声明了参数“time = 0”，但是当我们声明这个函数时却没有参数呢？

requestAnimationFrame 在什么时候给变量 time 赋值？

Answer 1

变量time已经设置了默认值0。通常情况下，函数参数的默认值是undefined，但是当用param=default_val，如果在没有参数的情况下调用函数或者参数未定义，则参数将默认为 default_val。参见 Javascript Default Function Parameters .

传递给requestAnimationFrame的回调函数被赋予一个参数，即它被调用的时间。

第一次调用 update 时，时间将为 0，因为它没有作为参数传递给 requestAnimationFrame。首次调用后，该函数将自身作为回调传递给 requestAnimationFrame，然后将使用 time 参数调用 update 函数，因此它不会被设置为 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);