In response to "A JavaScript Function Guard"

July 19th, 2010

Angus Croll just wrote a blog post on "function requests [where] the function only gets invoked after you’ve finally stopped requesting it". This started out as a comment over there, but quickly grew a little long, so I am just going to post it here. Go read his post to get a little context, it's worth your time.

I have used this pattern multiple times, but I never realized I should generalize it. Kudos, Angus! Great code; great read.

Now to the nitpicks :)

Angus implemented this utility as a prototype constructor, but my opinion is that using a closure is more elegant. It takes less lines of code to implement, and more importantly, less lines of code to use.

// Angus' version, with a bug
var resizeMonitor = new FunctionGuard(function (event) {
    if (typeof window.onresizeend === "function")
        window.onresizeend(event);
}, 100);
window.onresize = resizeMonitor.run;

But, it's actually worse than that to use, because you must bind the run method to the resizeMonitor object. If you don't then this will refer to the global object, rather than the resizeMonitor.

// Bug-free version
var resizeMonitor = new FunctionGuard(function (event) {
    if (typeof window.onresizeend === "function")
        window.onresizeend(event);
}, 100);
window.onresize = function () {
    resizeMonitor.run.apply(resizeMonitor, arguments);
};

Making this utility a function that returns another function with state hidden in a closure is easier for end-users.

// Same example, using my version
window.onresize = doLastCallAfter(100, function (event) {
    if (typeof window.onresizeend === "function")
        window.onresizeend(event);
});

Simulating an onresizeend event, was definitely a cool example. The first thing that I thought of was to automatically logout an inactive user, and protect their privacy.

var logoutAfterInactivity = doLastCallAfter(600000, function () {
    window.location.href = "http://example.com/logout";
});
document.body.onmousemove = document.body.onkeydown = logoutAfterInactivity;

And finally, here is my implementation.

function doLastCallAfter(quietTime, fn, context /*, fixed args */) {
    context = context || this;
    function slice(thing, i) {
        return Array.prototype.slice.call(thing, i || 0);
    }
    var timer, fixedArgs = slice(arguments, 3);
    return function (/* dynamic args */) {
        var dynamicArgs = slice(arguments);
        if (timer !== undefined) clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, fixedArgs.concat(dynamicArgs));
        }, quietTime);
    };
}

Awesome utility, Angus!

« Previous Entry

Next Entry »