Skip to main content

Mario Aguiar.

Implementando throttle en Vanilla JavaScript

Publicado hace
Actualizado hace
6 minutos de lectura

Hola, sean bienvenidos a éste video tutorial, en esta ocasión estaré mostrando cómo crear una simple función de throttle utilizando únicamente Vanilla JavaScript.

¿Qué es Vanilla JavaScript?

Vanilla JavaScript, o Vanilla JS no es más que simple y puro JavaScript, así le llamamos cuando no utilizamos librerías como Underscore, o frameworks como React.

¿Qué es “throttle”?

Asumo que si estás viendo éste tutorial ya sabes lo que significa, o al menos tienes una idea, así que no indagaré mucho en el tema, pero dejaré un articulo que lo explica en la sección de referencias en la descripción y post que acompañan a este video.

Básicamente se le conoce como throttle a la práctica en dónde se ejecuta una función únicamente una vez durante cierto intervalo de tiempo. Por ejemplo, el usuario da click a un botón que ejecuta una función, la función se ejecuta una vez.

¿Qué pasaría si el usuario da cien clicks al mismo botón?

R: La función se ejecutaría cien veces, malo para el performance.

Consideremos que tenemos código html, en él que se incluye éste botón:

1<button id="js-say-hello">Salúdame</button>
2

Y le anclamos un evento como éste, el cual graba “Hola mundo!” In la consola:

1const button = document.querySelector( '#js-say-hello' );
2const sayHello = () => {
3    console.log( 'Hola Mundo!' );
4}
5if ( button ) {
6    button.addEventListener( 'click', sayHello );
7}

Si abrimos este código en el navegador, podemos ver que cada vez que se da click, se registra una nueva entrada en la consola.

Para evitar esto, definimos un intervalo de tiempo (por ejemplo un segundo) durante el cual no importa cuántos clicks el usuario de, la función se ejecutará una sola vez. Una vez termine este intervalo, podemos ejecutarla una sola vez mas durante otro segundo, y así sucesivamente. Sólo se ejecutará una vez por segundo.

¿Cómo se implementa throttle?

En el siguiente ejemplo implementaremos una versión simple de Throttle, tomando como referencia el código anterior, implementaremos lo siguiente:

1const throttle = ( callback, delay ) => {
2    // Comenzamos variable para saber cuando se llamó por ultima vez a la función
3    let lastCalled = 0;
4    return ( ...args ) => {
5        // Guardamos referencia de éste momento.
6        const now = new Date().getTime();
7        // Revisamos si ha pasado el tiempo de retraso definido
8        if ( delay > ( now - lastCalled ) ) {
9            return;
10        }
11        // Guardamos éste momento como la última vez que se llamó a la función
12        lastCalled = now;
13        // Ejecutamos la función
14        return callback( ...args );
15    }
16}
17export default throttle;

Ahora, ya que tenemos implementada nuestra función, lo único que debemos hacer es reemplazar en nuestro código original, la llamada a la función envolviéndola en nuestro Throttle.

1// Importamos nuestra función
2import throttle from './throttle.js';
3const button = document.querySelector( '#js-say-hello' );
4// Envolmemos nuestro mensaje en una función nueva
5const printMessage = () => {
6    console.log( 'Hola Mundo!' );
7}
8// Ejecutamos Throttle
9const sayHello = throttle( printMessage, 1000 );
10if ( button ) {
11    button.addEventListener( 'click', sayHello );
12}

Ahora, cuando demos click en nuestro botón, podemos ver que sin importar cuantas veces demos click, sólo se ejecutará una vez por segundo, si aumentamos el tiempo de delay, podremos ver una ejemplo más claro, en ésta ocasión estoy utilizando tres segundos:

Notas adicionales

Un punto muy importante que debemos tomar en cuenta, es que al utilizar éste método, los clicks no se agregan a una cola, esto significa que no se van guardando para ser ejecutados más adelante, simplemente si se da click mientras aún no pasa el tiempo establecido, ese click se perdería.

Se puede ver éste código funcionando en Codepen (se recomienda abrir el enlace para ver la consola).

Referencias