Question

如果我尝试多次运行在JSfiddle中发布的代码，我会获得不同数量的div（我假设动画帧不会在1秒内完成）

    // shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ callback, /* DOMElement */ element){
            return window.setTimeout(callback, 1000 / 60);
        };
})();
window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame            ||
        window.webkitCancelRequestAnimationFrame    ||
        window.mozCancelRequestAnimationFrame         ||
        window.oCancelRequestAnimationFrame        ||
        window.msCancelRequestAnimationFrame        ||
        clearTimeout
} )();

var request;

(function animloop(){
    console.log("render() should be done here and now");
    request = requestAnimFrame(animloop, $("#time").append("<div></div>"));
})();

// cancelRequestAnimFrame to stop the loop in 1sec
console.log("will do cancelRequestAnimFrame in 1sec...")
setTimeout(function(){
    console.log("1sec expired doing cancelRequestAnimFrame() now")
    cancelRequestAnimFrame(request);                
}, 1*1000)

我的问题是如何确保获得相同数量的div？

Answer 1

无法保证setTimeout和requestAnimationFrame回调的精确度。

setTimeout非常不精确。

requestAnimationFrame取决于系统呈现网页的速度。如果页面非常复杂并且帧速率下降，则回调的调用次数将少于每秒60次。

现在，如果您解释实际问题是什么，我们可以尝试找到一个好的解决方案。

你说你想要一个<div>的常数，这意味着执行的次数是恒定的。这不能通过时间来控制。根据您的使用情况，您可以直接控制执行次数。例如。运行你的回调60次（理想情况下，使用requestAnimationFrame接近1次）。

修改根据你的评论：如果你想做一个在1秒内平稳填充的进度条。最好的方法是：使用requestAnimationFrame，传递给回调的第一个参数是高精度时间。从这个计算你应该填写你的进度条多少。如果时间> 1秒，不要求另一帧。

主要想法：

var startTime; function startProgress() { startTime = null; requestAnimationFrame(progress); } function progress(time) { if (startTime === null) startTime = time; // Compute progress since last frame var ratio = (time - startTime) / 1000; // time is in [ms] // Here you should update your progress, maybe this: // Note I've used Math.min because we might go over 100% due to callback time. $(".progressDiv").width(Math.min(ratio, 1) * 300); // If we're not done yet, request a new animation frame if (ratio < 1) requestAnimationFrame(progress); }

如何将动画帧锁定为1秒？

1 个答案: