Debounce JavaScript: cómo hacer que su JS espere

Los métodos de rebote no se ejecutan cuando se invocan. En cambio, esperan un tiempo predeterminado antes de ejecutar. Si se vuelve a llamar al mismo método, se cancela el anterior y se reinicia el temporizador.

Aquí hay un breve recorrido en video en el que hago un método de rebote:

Y aquí está el código fuente del video tutorial:

Veamos ahora el código con más detalle.

Suponga que tiene un botón llamado así:

Click me

Y en su archivo JS tiene algo como esto:

document.getElementById('myBtn').addEventListener('click', () => { console.log('clicked'); })

Cada vez que haga clic en su botón, verá un mensaje en su consola que dice clicked.

Agreguemos un método de rebote a nuestro clickdetector de eventos aquí:

document.getElementById('myBtn').addEventListener('click', debouce(() => { console.log('click'); }, 2000))

El método antirrebote aquí toma dos argumentos, callback& wait. callbackes la función que desea ejecutar, mientras que waites el período de retraso configurable después del cual desea callbackque se ejecute.

Aquí nuestro callbackmétodo simplemente es console.log('click');y el waites 2000 milliseconds.

Entonces, dado este método de rebote, que toma dos parámetros callback& wait, definamos debounce:

function debounce(callback, wait) { let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => { callback(...args); }, wait); }; }

La función debouncetoma dos parámetros: la devolución de llamada (que es la función que queremos ejecutar) y el waitperíodo (después de cuánto retraso queremos ejecutar nuestra devolución de llamada).

Dentro de la función, simplemente devolvemos una función, que es la siguiente:

let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => { callback(...args); }, wait); };

Lo que hace esta función es invocar nuestro callbackmétodo después de un cierto período de tiempo. Y si durante ese período de tiempo se vuelve a invocar el mismo método, la función anterior se cancela y el temporizador se pone a cero y vuelve a empezar.

¡Y eso es todo! Todo lo que necesitas saber sobre lo que es el rebote.

Aquí hay otro video adicional sobre cierres, porque utilicé una función closuredentro de mi debounce.

Avíseme en Twitter si pudo encontrar el uso del cierre dentro del método de rebote.

Feliz codificación a todos.