这段代码将尽可能快地绘制/循环
function loop() {
draw();
loop();
}
这段代码会在每个循环周期中人为地增加约100毫秒的时间。
function loop() {
draw();
setTimeout(loop, 100);
}
在创建类似这样的循环时,我使用的是一个精确计算的增量(delta),以便进行准确的计算。
function draw(delta) {
console.log("%f ms", delta);
}
function loop(last) {
var now = performance.now();
var delta = now - last;
draw(delta);
setTimeout(function() { loop(now); }, 100);
}
loop(0);
正如您所看到的,draw函数每100毫秒被调用一次。这大约是每秒10帧。现在,您可以使用此delta值进行精确计算,例如动画序列或定位移动元素。
你可以轻松地将这个值作为循环的变量。
function framesPerSecond(x) {
return 1e3/x;
}
function draw(delta) {
console.log("%f ms", delta);
}
function loop(fps, last) {
var now = performance.now();
var delta = now - last;
draw(delta);
setTimeout(function() { loop(fps, now); }, fps);
}
loop(framesPerSecond(25), 0);
现在你可以非常容易地模拟任何帧速率
loop(framesPerSecond(0.5), 0);
注意: 当 draw
函数运行时间较长时,framesPerSecond
的准确性会受到影响。您可以通过测量每个周期中 draw
运行的持续时间,并从 fps
延迟中减去该时间来改进此问题。