timestamp 在 requestAnimationFrame 回调中没有变化

Question

我想以两种方式跟踪时间戳，首先我 forloop 调用，其次使用 setinterval。但是对于forloop，timestamp在所有times[]数组中都是一样的???

var i = 0;
var i2=0;
var times = [];
var times2 = [];

function step(timestamp) {
   times[i++] = timestamp;
}

for (let k=1 ; k < 1111 ; k++) requestAnimationFrame(step);


function step2(timestamp) {times2[i2++] = timestamp;}

rAF = _ => requestAnimationFrame(step2);
const ID = setInterval(rAF,0);
setTimeout( _ => clearInterval(ID) , 200);

console.log(times); // [22.453 , 22.453 , 22.453 ,......] NEVER CHANGE !
console.log(times2); // [ 87.456 , 87.456 , 99.223 ...]

编辑：以下更改不影响时间[]，总是相同的值

for (let k=1 ; k < 1111 ; k++) {
    for (let o=1 ; o < 11111111 ; o++) {} // i guess it put some delay between each call to requestAnimationFrame
    requestAnimationFrame(step);
}

Answer 1

您的 for (let k=1 ; k < 1111 ; k++) requestAnimationFrame(step); 同时调用所有 requestAnimationFrame，因此对 step 的所有 1110 调用都安排在下一个动画帧，因此它们被调用同时进行。

这将是一个运行step函数的设置，每个动画帧1111次。

function step(timestamp) {
   times[i++] = timestamp;
   if( i < 1111 ) {
      requestAnimationFrame(step)
   }
}

requestAnimationFrame(step)

变化中：

for (let k=1 ; k < 1111 ; k++) {
   requestAnimationFrame(step);
}

至：

for (let k=1 ; k < 1111 ; k++) {
    for (let o=1 ; o < 11111111 ; o++) {} // i guess it put some delay between each call to requestAnimationFrame
    requestAnimationFrame(step);
}

不会改变任何东西，循环需要多长时间都没有关系。 JavaScript 是单线程的。从那时起，当循环为运行ning 时，其间不会执行其他代码。因此，循环内的所有 requestAnimationFrame(step); 将始终排队等待相同的下一个动画帧。

timestamp 在 requestAnimationFrame 回调中没有变化

timestamp does not change in requestAnimationFrame callback

javascript

for-loop

requestanimationframe