requestAnimFrame vs plain old settimeout javascript

Question

Working on a script and i noticed that my ajax was riring about 10 fold more than intended so i put in an "fps counter" and noticed that rather than running 10times per second as intended chrome was running about 130 times per second ie/ff/opera about 35 frames per second. using the following set up:

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

Now google chrome does not seem to care what value i put in window.setTimeout(callback, 100); it could be 1 or it could be 10000000 it runs at about 130frames reguardless the rest seem to obey it close enough (always about 3x the intended) And ive already made sure that i am not calling load() multiple times

on the other hand i used to use setTimeout(load, 100); And when i change to that all browsers start running at around 30fps

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

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

Is it bad practice or out dated to do it like that? Point is i am not really sure WHY i am using the requestAnimFrame other then all the examples i find online use it aswell and it seemed to accomplish the given goal. And the only reason i am firing load over and over again is to check and see if there is any new info to come down..

EDIT And for those of you who read this in the future. After running line by line thru the code i found an error in logic that explained my 3x. I did make sure i was not running calling load() more then on place but

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 was being called by xmlhttp.onreadystatechange=connected; So it can fire many times running 3 sets of load(); What i needed to do was this:

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

}

So both schmit and patrick helped out here. schmit by letting me know i was a noob and was doing it wrong. patrick for helping me realize exactly what was happening on that function

Answer 1

Defining the function

window.requestAnimFrame()

this way will only use the setTimeout if none of the other functions exist. it could be rewritten more explicitly as:

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

So it only uses the timeout if none of the other functions exist. This function is used to fall back on proprietary implementations of requestAnimationFrame in case it doesn't exist, like on old browsers. Those old browsers will use the timeout.

requestAnimationFrame by definition will have it's framerate determined by the client. That means it could run 180x per second (like you see in chrome) or 1x per second. It allows the client browser to determine what is most important, and gives it a way to turn off screen refreshes when it's not necessary (like when a tab is not active or when a mobile browser gets minimized).