JavaScript Polling

Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for it.  Polling with JavaScript isn't difficult but it's not easy either.  Let me show you a few implementations of JavaScript polling that you can add to your toolbox!

With Promises

Since the Promise API is implemented almost all browsers today, here's a polling implementation using them:

// The polling function
function poll(fn, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;

    var checkCondition = function(resolve, reject) {
        // If the condition is met, we're done! 
        var result = fn();
        if(result) {
            resolve(result);
        }
        // If the condition isn't met but the timeout hasn't elapsed, go again
        else if (Number(new Date()) < endTime) {
            setTimeout(checkCondition, interval, resolve, reject);
        }
        // Didn't match and too much time, reject!
        else {
            reject(new Error('timed out for ' + fn + ': ' + arguments));
        }
    };

    return new Promise(checkCondition);
}

// Usage:  ensure element is visible
poll(function() {
	return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150).then(function() {
    // Polling done, now do something else!
}).catch(function() {
    // Polling timed out, handle the error!
});

The code is structured easy enough to read but it's mostly three-fold:  the conditional function which signals polling success, a conditional failure which hasn't timeout out, so we'll run again, or a failure which has run past timeout which should return an error.

Without Deferreds

If you aren't using Deferreds, no worry -- polling is just about the same:

function poll(fn, callback, errback, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;

    (function p() {
            // If the condition is met, we're done! 
            if(fn()) {
                callback();
            }
            // If the condition isn't met but the timeout hasn't elapsed, go again
            else if (Number(new Date()) < endTime) {
                setTimeout(p, interval);
            }
            // Didn't match and too much time, reject!
            else {
                errback(new Error('timed out for ' + fn + ': ' + arguments));
            }
    })();
}

// Usage:  ensure element is visible
poll(
    function() {
        return document.getElementById('lightbox').offsetWidth > 0;
    },
    function() {
        // Done, success callback
    },
    function() {
        // Error, failure callback
    }
);

The difference here is that there's no return value -- the callback functions take the place of the Deferred instance.

Polling isn't necessarily a consequence of async coding but it has definitely increased in usage and importance due to our desire to write async code.  During my time writing front-end functional tests with the Intern testing framework, I've used polling quite a bit both on the server and client sides.  This technique will always have its place so make sure you have a snippet like this available.