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 »


Recent Entries

Beyond Source Maps on March 12th, 2014

Memory Tooling in Firefox Developer Tools in 2014 on March 4th, 2014

Hiding Implementation Details with ECMAScript 6 WeakMaps on January 13th, 2014

Re-evaluate Individual Functions in Firefox Developer Tools' Scratchpad on November 22nd, 2013

Testing Source Maps on October 2nd, 2013

Destructuring Assignment in ECMAScript 6 on August 15th, 2013

My Talk from Front Trends 2013 on June 21st, 2013

"Compiling to JavaScript, and Debugging with Source Maps" on Mozilla Hacks on May 22nd, 2013

Source Map Specification Discussion Mailing List on February 28th, 2013

Regarding "Dynamic Source Maps" on January 22nd, 2013

Creative Commons License

Fork me on GitHub