setInterval, setTimeout, requestAnimationFrame Timestamp Update

by laucheukhim

HTML

<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>

JavaScript

var t1 = t1p = t2 = t2p = t3 = t3p = Date.now();
var t1div = document.getElementById("t1"),
    t2div = document.getElementById("t2"),
    t3div = document.getElementById("t3");
var disabled = 0;

function t1update() {
    t1 = Date.now();
    t1div.innerHTML = t1;
    if (t1 - t2p > 100) {
        disabled++;
    } else {
        disabled = 0;
    }
    if (disabled > 5) {
        disabled = 0;
        console.log("reenabled");
        setTimeout(t2update, 16);
    }
    t1p = t1;
}
setInterval(t1update, 16);

function t2update() {
    t2 = Date.now();
    t2div.innerHTML = t2;
    var diff = t2-t2p;
    t2p = t2;
    setTimeout(t2update, 16);
}
setTimeout(t2update, 16);

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

function t3update(timestamp) {
    t3 = Date.now();
    t3div.innerHTML = t3;
    var diff = t3-t3p;
    t3p = t3;
    requestAnimationFrame(t3update);
}
requestAnimationFrame(t3update);