时间戳在requestAnimationFrame回调中未更改

时间:2019-02-16 16:08:26

标签: javascript for-loop requestanimationframe

我想以两种方式跟踪时间戳,第一种是循环调用,第二种是使用setinterval。 但是对于forloop,时间戳在所有时间[]数组中都相同???

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);
}

1 个答案:

答案 0 :(得分:2)

您的function Commande(Request $request) { $pn = (int) $request->input('id'); try { $pdr = Panier::findOrFail($pn); $pdr->each(function ($item, $key) { $user = Commande::create([ 'ID_User' => $item->ID_User, 'ID_Piece' => $item->ID_Piece, 'QTE' => $item->QTE, ]); if ($user && $item->delete()) { echo 'Commande Confirmée'; } }); } catch (Illuminate\Database\Eloquent\ModelNotFoundException $e) { //@Todo handle error } } 同时调用所有for (let k=1 ; k < 1111 ; k++) requestAnimationFrame(step);,因此对requestAnimationFrame的所有1110调用都安排在下一个动画帧中,因此在所有位置调用它们在同一时间。

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

step

更改:

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

requestAnimationFrame(step)

收件人:

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

不会更改任何内容,循环需要多长时间也没关系。 JavaScript是单线程的。从那时起,在循环运行时,在它们之间将不再执行其他代码。因此,循环中的所有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); } 都将始终排队等待下一个动画帧。