requestAnimFrame与普通旧settimeout javascript

在编写脚本时，我注意到我的ajax比预期的速度快了10倍，所以我加入了一个“fps计数器”，并注意到chrome并没有像预期的那样每秒运行10次，而是每秒运行130次ie/ff/opera，大约每秒35帧。使用以下设置：

function load(){ 
//other code that does not effect this
    requestAnimFrame(function(){
        load();
    });
    debug();//function i was using to catch fps
}

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 100);
    };
})();

现在google chrome似乎不在乎我在window.setTimeout（回调，100）中输入的值；它可以是1，也可以是10000000，它以130帧左右的速度运行，没有规则，其余的看起来都很接近它（通常是预期的3倍），我已经确定我没有多次调用load（）

另一方面，我使用setTimeout（load，100）；当我换成这个模式时，所有浏览器都会以每秒30帧左右的速度运行

function load(){ 
    //other code that does not effect this

        debug();//function i was using to catch fps
        setTimeout(load, 100);
    }

那样做是坏习惯还是过时？关键是我不太清楚为什么我要使用requestAnimFrame，而我在网上找到的所有例子都使用它，而且它似乎实现了给定的目标。我一遍又一遍地发射load的唯一原因是为了检查是否有任何新的信息传下来

编辑并为将来阅读此文章的读者提供。在逐行运行代码之后，我发现了一个逻辑错误，它解释了我的3x。我确实确保了我没有运行调用load（）的操作，而不是就地调用

function connected(result){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        //code that does not matter for this
    }else if (xmlhttp.status==404){
        alert("epic failure i lost the page");
    }
    d_time = new Date().getTime();
    load();
}

Connect正在被xmlhttp调用。onreadystatechange=connected；因此，它可以在运行3组负载（）时多次点火；我需要做的是：

function connected(result){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        d_time = new Date().getTime();
        load();
    }else if (xmlhttp.status==404){
        alert("epic failure i lost the page");
    }

}

所以施密特和帕特里克都在这里帮忙。施密特让我知道我是个笨蛋，而且做得不对。感谢patrick帮助我准确了解该函数定义函数时发生了什么

window.requestAnimFrame（）

这种方法仅在其他函数均不存在时使用setTimeout。可以更明确地重写为：

window.requestAnimFrame = (function(callback){
    var theFunction;
    if (window.requestAnimationFrame) {
        theFunction = window.requestAnimationFrame;
    } else if (window.webkitRequestAnimationFrame) {
        theFunction = window.webkitRequestAnimationFrame;
    } else if (window.mozRequestAnimationFrame) {
        theFunction = window.mozRequestAnimationFrame;
    } else if (window.oRequestAnimationFrame) {
        theFunction = window.oRequestAnimationFrame;
    } else if (window.msRequestAnimationFrame) {
        theFunction = window.msRequestAnimationFrame;
    } else {
        theFunction = function(callback){
            window.setTimeout(callback, 100);
        };
    } 
    return theFunction;
})();

因此，它只在其他函数都不存在时使用超时。此函数用于在requestAnimationFrame不存在的情况下依赖于requestAnimationFrame的专有实现，就像在旧浏览器上一样。那些旧浏览器将使用超时

requestAnimationFrame by definition的帧速率由客户端确定。这意味着它可以每秒运行180倍（就像你在chrome中看到的那样）或每秒运行1倍。它允许客户端浏览器确定什么是最重要的，并提供一种在不需要时关闭屏幕刷新的方法（如当选项卡未激活或移动浏览器最小化时）。

我相信你的fps计时器是错的。我用

webkitRequestAnimationFrame

获得了一致的60FPS（实际上大约62帧）

var last = new Date(),
    frames = [],
    div = document.getElementById("fps");

(function loop(){
    var span = ((new Date()) - last)/1000;
    last = new Date();
    frames.push(span);

    if (frames.length > 100) frames.shift();

    var total = 0;    
    for (var i = 0; i < frames.length; i++)total += frames[i];    

    div.innerHTML = Math.floor(frames.length/total);
    //setTimeout(loop, 1000/60);
    webkitRequestAnimationFrame(loop);
})();

---

100毫秒将是每秒10帧。。。我想大胆猜测一下，你的“fps计数器”的代码是不正确的。它不是d_count/（（new Date（）.getTime（）-d_time）/1000）。。d_time设置为脚本的第一次运行，d_count为+++'d每次运行load（）是我检查的第一件事。而且所有浏览器上运行的代码都是一样的，所以chrome与restAhh仍然不同，所以最好让它在requestanimframe之外运行，并在ajax上将其限制在每秒不超过10次。那样的话，如果他们最小化了或者什么的话，ajax就不会继续运行了-到了中午，我真的觉得自己有点傻，当时我还没想清楚，做了我想做的事，然后当我回去看的时候，我读了它wrong@Shmiddty，也许我没有，但效果和我写的一样。至少在javascript中，| |运算符只在得到非false结果之前进行计算（false、“false”、0、“、null、undefined都是false）。@nonameYes，让你的ajax调用远离RequestAnimationFrame我不知道为什么我会得到预期的3倍，但重要的是得到相同的十字browser@NonameProvided请随意移除它们，看看结果是一样的。已经这样做了，face将我自己交给了ya。但实际上，阅读这些代码有助于。。我只需要弄清楚我想如何控制它，这样我就不会滥发我的服务器/db了。。对于那些想知道我在上面编辑了我的回复的人来说，它最初是说“这是因为你有-webkit动画：bounce.5s ease in out infinite；在你的css中”Noob yes。。。再次假设并发布b4检查的错误？不，我把它改成这样了。我也编辑了上面的问题，我发现了为什么我得到了预期的3倍的画面

(function poll(){
    // do some stuff

    setTimeout(poll, 3000); // poll every 3 seconds
    // if you are doing an ajax call, you'll want to place the timeout in the 
    // callback so you aren't initiating another call before you've received 
    // a response to the current one. 
})();