Web 3.0, 6 Bladed Razors, 7 Minute Abs » Timers

enterval, an automatic setInterval chainer.

Zach Leatherman — Mon, 24 Dec 2007 03:59:53 +0000

Hello internet. Today we’ll be exploring the magical wonders of setInterval. Have you ever worked on a project that needed multiple timers going simultaneously? Have you ever wanted to bind all of those timer callbacks into just one timer without restructuring your code manually? Well, being the Curious George that I am, I wanted to know the performance benefits of the grouping callbacks and eliminating unnecessary timers. Here’s the code I used to do it:

Instead of:

window.setInterval(function(){ /* Payload! */ }, 100);
window.setInterval(function(){ /* Payload! */ }, 100);
window.setInterval(function(){ /* Payload! */ }, 100); 
// results in three separate timers.

You can do:

enterval.set(function(){ /*Payload */ }, 100);
enterval.set(function(){ /*Payload */ }, 100); // combines with the first 100ms interval.
enterval.set(function(){ /*Payload */ }, 100); // combines with the first two 100ms intervals.
// results in one timer, containing all three callbacks.

Here’s the code:

var enterval = (function()
{
    var intervals   = {};
 
    function add(callback, interval)
    {
        var index = 0;
        if(intervals[interval]) {
            index = intervals[interval].length;
            intervals[interval].push(callback);
        } else {
            intervals[interval] = [callback];
            window.setTimeout(call, interval, interval);
        }
        return interval+':'+index;
    }
 
    function call(interval)
    {
        var d = intervals[interval];
        for(var j=0,k=d.length;j<k ;j++) {
            if(typeof d[j] == 'function' && d[j]() === false) return;
        }
        window.setTimeout(call, interval, interval);
    }
 
    return {
        set: function(callback, interval, data)
        {
            return add(callback, interval, data);
        },
        clear: function(id)
        {
            var s = id.split(':');
            delete intervals[s[0]][s[1]];
        }
    };
})();

Unfortunately, in the limited benchmarks that I performed, it didn’t seem to operate all that much differently from recursive setTimeout calls, even with (10ms, 100ms, or 1000ms) intervals and (50, 100, 1000) timers (with the payload doing nothing other than creating a date for benchmarking purposes. This code does get around the oddly performing setInterval inside of a loop bug. There may be some other benefit in ordering the interval callbacks after assignment, but I haven’t included that in the functionality above. Feel free if you wish.

Problems with Looping through window.setInterval

Zach Leatherman — Mon, 24 Dec 2007 03:46:24 +0000

Look at this code. What do you expect to be the outcome?

var d = new Date();
var r = [];
for(var j=0,k=2;j<k ;j++) {
    window.setInterval(function()
    {
        var next = new Date();
        r.push(next.getTime() - d.getTime());
    },1000);
}

Every 1000 milliseconds (1 second), the r array should have three delta timestamps added into it (one for each interval set in the for loop). In FireFox, however, there are exactly nine delta timestamps added per second. If you set k=10, the result is one hundred delta timestamps per second. If anyone has the answer, I am curious, even if the result is that I'm an idiot. It seems to work correctly in Internet Explorer 7. Thanks for your help, internet.


Speed up Including Google Analytics
Zach Leatherman — Fri, 02 Nov 2007 04:27:13 +0000
Have you ever noticed that your homepage hangs when including the Google Analytics JavaScript file?  I think a few people have noticed a delay.  Well, let’s try something different.  Let’s create the script node dynamically using DOM methods and put a timeout on this creation so that it inserts just enough delay so that your page won’t hang (we’ll move out of the current execution path with the timeout, thus allowing your page to finish loading).  The obvious benefit here is that even when the Google servers lag a little bit serving you the JavaScript file, your page will appear as if it has already finished loading.  Given optimally performing Google Servers, this method will perform slower most of the time, but it shines in those rare instances where there is a bit of a delay.  Give it a try, and let me know if it works any better.
Of course, remember to put near the end of your , and not directly in your .

<script type="text/javascript">
(function()
{
    setTimeout(function()
    {
        var node = document.createElement("script");
        node.src = 'http://www.google-analytics.com/urchin.js';
        //for SSL
        //node.src = 'https://ssl.google-analytics.com/urchin.js';
        node.type = 'text/javascript';
        document.getElementsByTagName("head")[0].appendChild(node);
        var init = setInterval(function()
        {
            _uacct = 'UA-XXXXXX-X'; // INSERT YOUR CODE HERE
            if(typeof urchinTracker != 'undefined') {
                urchinTracker();
                clearInterval(init);
            }
        }, 100);
    }, 0);
})();
script>

Try it on my benchmark page.