requestAnimationFrame 是如何工作的？

Question

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

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

为什么我们在函数中声明参数 "time = 0" 但是当我们声明这个函数时不带参数呢？

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

Answer 1

如果你想让一个time变量累计为动画运行秒，你可以使用这个：

let time = 0;

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

update();

下面是此代码的 JSFiddle demo 实例。

所有 requestAnimationFrame 所做的就是再次调用 update() 函数到运行，因此 time++ 会在每次 update() 函数时增加该值运行秒。如果在 update() 函数中声明 time 变量，它永远不会递增，因为每次 update() 函数运行s.

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

希望这对您有所帮助:)

Answer 2

变量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);

requestAnimationFrame 是如何工作的？

How works requestAnimationFrame?

javascript

requestanimationframe