requestAnimationFrame vs setInterval Disabled Run

by laucheukhim

HTML

<div>Disable JavaScript now to see the difference.</div><br/>
<div class="table-row">
    <div class="table-cell title">requestAnimationFrame:&nbsp;</div><div id="a" class="table-cell"></div>
</div>
<div class="table-row">
    <div class="table-cell title">setInterval:&nbsp;</div><div id="b" class="table-cell"></div>
</div>

CSS

.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}
.title {    
    text-align: right;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
 
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

var a = document.getElementById("a"), b = document.getElementById("b");

function step(timestamp) {
  a.innerHTML = new Date().getTime();
  requestAnimationFrame(step);
}
requestAnimationFrame(step);

setInterval(function() {
    b.innerHTML = new Date().getTime();
}, 0)