Polling em JavaScript

A sondagem com JavaScript é uma daquelas funções feias, mas importantes, das práticas avançadas de teste e experiência do usuário de front-end. Às vezes, não há um evento ao qual você possa se conectar para indicar que uma determinada tarefa foi concluída, então é preciso sujar as mãos e simplesmente fazer uma sondagem. A sondagem com JavaScript não é difícil, mas também não é fácil. Deixe-me mostrar algumas implementações de polling em JavaScript que o senhor pode adicionar à sua caixa de ferramentas!

Com promessas

Desde que o API Promise está implementada em quase todos os navegadores atuais. Aqui está uma implementação de sondagem que a utiliza:

// 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())  0;
}, 2000, 150).then(function() {
    // Polling done, now do something else!
}).catch(function() {
    // Polling timed out, handle the error!
});

O código é estruturado de forma fácil de ler, mas é composto principalmente de três partes: a função condicional que sinaliza o sucesso da sondagem, uma falha condicional que não atingiu o tempo limite, portanto, executaremos novamente, ou uma falha que ultrapassou o tempo limite e deve retornar um erro.

Sem Deferreds

Se o senhor não estiver usando Deferreds, não se preocupe: o polling é praticamente o mesmo:

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

A diferença aqui é que não há valor de retorno: as funções de retorno de chamada tomam o lugar da instância Deferred.

A sondagem não é necessariamente uma consequência da codificação assíncrona, mas seu uso e importância definitivamente aumentaram devido ao nosso desejo de escrever código assíncrono. Durante o tempo em que escrevi testes funcionais de front-end com a estrutura de testes Intern, usei bastante a sondagem, tanto no servidor quanto no cliente. Essa técnica sempre terá seu lugar, portanto, certifique-se de ter um snippet como esse disponível.