Throttle con jQuery, mejorando nuestro código

Uno de los problemas que se encuentra uno a menudo cuando desarrolla un front-end en javascript es la ejecución seguida de un mismo código disparado por un evento que se repite de forma constante a gran velocidad bla bla bla…

Pongamos un ejemplo que seguro quedará mas claro.

$('input').on('keydown', function(){
    $.ajax('blabla.php');
});

Quizás ahora se vea mas claro. Un input donde cada vez que pulsemos una tecla, hará una petición ajax. Fantástico verdad? Pero y el servidor? Va a recibir decenas de peticiones una tras otra que realmente no servirán de nada.

Solución: Throttle

La solución está en ponerle un pequeño tiempo de espera o lo que comunmente se conoce como throttle, de forma que la acción no se realizará hasta que haya pasado el tiempo de espera sin lanzar el evento.

Veamos un ejemplo:

$('input').on('keydown', function(){
    $.throttle(1000, function(){
        $.ajax('blabla.php');
    });
});

Ahora nuestro código jQuery únicamente se ejecutará pasado 1 segundo desde la última pulsación de tecla y aunqué se pulsen varias teclas repetidamente, SIEMPRE esperará a la última tecla + 1 segundo.

Como es posible?

jQuery throttle

Gracias a esta pequeña función que hay que colocar en vuestro código jQuery:

$.throttle = function(timeout, callback){ // Añadimos la función al namespace de jQuery
    if($.throttle.timeout !== false){
        // Si estamos esperando y volvemos a llamar a la función,
        // borramos el timeout anterior para tener que volver a esperar
        // el tiempo establecido.
        clearTimeout($.throttle.timeout);
    }
    // Aquí si disparamos la función después de pasado el tiempo de espera
    // y siempre y cuando una nueva llamada no lo cancele.
    $.throttle.timeout = setTimeout(function(){
        $.throttle.timeout = false;
        callback(); // Ejecutamos la llamada
    }, timeout);
};
$.throttle.timeout = false; // La variable timeout es nuestra referencia de la función setTimeout
Corre la voz!

Comentarios


Escribir un comentario

Escribe lo que desees, si quieres incluir código hazlo usando los tags <pre>

Nombre:
Email:
Website: