La función debounce() en JavaScript

1. Comprender el término rebote en JavaScript
2. Utilice la función debounce() en JavaScript

Este artículo le enseñará cómo utilizar la función debounce() de JavaScript para mejorar el rendimiento de sus aplicaciones.

Comprender el término rebote en JavaScript

JavaScript utiliza la técnica de eliminación de rebotes para acelerar el rendimiento del navegador. Un rebote es pariente de un acelerador, y ambos mejoran el rendimiento de la aplicación en línea.

Sin embargo, se observan en muchos contextos. Se emplea un rebote cuando todo lo que consideramos es el estado final.

Por ejemplo, están retrasando la recuperación de los resultados de búsqueda de escritura anticipada hasta que el usuario haya terminado de escribir. La herramienta ideal para utilizar es un acelerador si queremos controlar la velocidad de todos los estados intermedios.

Utilice la función debounce() en JavaScript

Aquí hay una ilustración de código para ayudarlo a comprender cómo eliminar el rebote de una función:

function debounce(jss, timeout = 3000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      jss.apply(this, args);
    }, timeout);
  };
}

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

Ejecutar código

Entonces, ¿qué está pasando aquí? El debounce() es una función única que realiza dos funciones:

• Asignar un alcance a la variable del temporizador
• Configurar su función para que se ejecute en un momento específico

Veamos el primer caso de uso con entrada de texto para ver cómo funciona.

La función debounce() reinicia inicialmente el temporizador utilizando clearTimeout cuando un visitante escribe la primera letra y suelta la tecla (temporizador). El paso no es necesario en este momento porque no hay nada programado.

Se espera que la función userInput() sea llamada en 3000 milisegundos (3 segundos). Sin embargo, si el visitante continúa escribiendo, cada lanzamiento esencial volverá a activar la función debounce().

Cada invocación debe restablecer el temporizador o, en otras palabras, cancelar cualquier preparación anterior de Entrada de usuario () y reprogramarlo para un nuevo tiempo: 3000 milisegundos en el futuro. Esto continuará mientras el visitante mantenga las pulsaciones de teclas dentro de los 3000 milisegundos.

Debido a que la programación anterior no se borrará, se invocará userInput().

Producción:

Verá que el método setTimeout sigue difiriendo cuando escribe s, h, i o v (a pesar de la función llamada userInput). Cuando hacemos una pausa de tres segundos mientras escribimos, se imprime la función principal: Changing data.

La eliminación de rebotes mejora la velocidad de la aplicación al invocar funciones solo después de una cantidad determinada de tiempo de pausa en lugar de en cada operación. Sin embargo, no tiene que lograr esto por su cuenta.

Una función debounce está disponible en Lodash, por ejemplo. Los colaboradores han mejorado bibliotecas como Lodash para mejorar la función debounce.

Hemos discutido qué es la eliminación de rebotes, por qué es útil y cómo hacerlo en JavaScript en este artículo.