¿Qué está desacreditando en JavaScript??

¿Alguna vez ha hecho clic en un botón de una página web y siente que está tomando un poco de tiempo para cargar contenido?. Del mismo modo, mientras se escribe en la barra de búsqueda, la búsqueda toma un breve retraso para mostrar los resultados. Incluso si nunca lo sentiste, déjame decirte que los desarrolladores usaron la función debilitar Para lograr este retraso y este retraso es muy útil cuando se trata de detener las solicitudes innecesarias al servidor.

Por ejemplo, si ha establecido una función en el cambio de tamaño de la ventana y ahora imagina llamar a la función continuamente mientras redimensionamos nuestra ventana. ¿Es una forma eficiente de hacerlo?? Por supuesto, no porque llamar a esa función específica continuamente es innecesaria y, por lo tanto, afectaría el rendimiento.

En esta publicación, hablaremos sobre lo que se está desacreditando en JavaScript y su implementación con algunos ejemplos.

Que esta desacreditando?

La definición más simple de desacreditar sería que es una técnica de programación destinada a restringir el llamado de una función que requiere mucho tiempo (más cálculos) con frecuencia o solo desencadena una función cuando es necesario. Supongamos que eres un desarrollador y estás creando una barra de búsqueda. Desea mostrar sugerencias solo una vez que el usuario termine de escribir, lo que significa que no en cada tecla de tecla. Por lo tanto, utilizando el desacuerdo en JavaScript, uno puede mejorar el rendimiento de su página web.

¿Cómo funciona el desacuerdo?? Bueno, si lo pongo en palabras simples, entonces el desacuerdo funciona al colocar un temporizador de "espera" antes de la ejecución de una parte específica de código. Y si, debido a alguna situación, el mismo proceso se reulve. Luego, en lugar de formar una cola de dos mismos eventos, detenemos el antiguo proceso y solo nos centramos en la ejecución del reciente. Esto también nos salva de una situación de "cuello de botella". Para aquellos que no están familiarizados con el "cuello de botella", es un estado que ocurre cuando intenta sacar más cosas en la pantalla que la potencia de procesamiento del servidor

Implementación de desacuerdo

Podemos implementar el debilidad en JavaScript utilizando los pasos que se dan a continuación:

• Cree un temporizador de retraso dentro de la función y configúrelo en 0
• Restablecer el temporizador si la función especificada se invoca nuevamente
• Llame a la función de desbloqueo solo cuando el tiempo de espera.

Parte de codificación HTML

El primer paso en la implementación de debambre en JavaScript requerirá un elemento HTML en el que asignaremos el evento de clics.

Primero, cree un elemento de botón en HTML:

Haz click en mi

La etiqueta de script se usa para hacer referencia al archivo donde escribiremos nuestro código JavaScript que es código.js. También hemos usado el identificación atributo que usaremos para hacer referencia al elemento de botón de HTML en JavaScript.

Ahora que hemos terminado con la parte de codificación HTML, implementemos la función de desbordamiento en JavaScript.

Parte de codificación de JavaScript

La función para implementar la técnica de desbloqueo sería así:

// Obtener referencia del botón
var mybtn = documento.getElementById ("mybtn");
// Función de desbordamiento definida
const debuncion = (myFunc, demandado) =>
Dejar desbloqueo;
Función de retorno ()
context const = this;
const args = argumentos;
ClearTimeOut (desbloqueo);
desblouscetimer = setTimeOut (() => myFunc.aplicar (contexto, args), retrasar tiempo);


// Agregar un oyente de eventos al botón
mybtn.addEventListener ('Click', Debuncia (function ()
// La alerta se verá después de dos segundos de tiempo fuera
alerta ("Hola mundo después de 2 segundos");
, 2000));

En el código anterior, primero, obtenemos la referencia del botón especificado en HTML y agregamos un evento de clic en este botón. Cada clic del botón invocaría la función de debaldad.

En el debilitar Función, estamos tomando dos argumentos, el primero es la función y la segunda es el tiempo de retraso o el tiempo de espera. Luego inicializamos el desbordante que rastreará el período de retraso.

Cuando un usuario hace clic en el botón una vez, se llamará a la función de debaldad después del retraso.

Entonces, si el usuario hace clic en el botón y luego hace clic nuevamente en el botón antes del final del retraso, el temporizador se restablece y se borrará el retraso inicial.

Toda esta funcionalidad se logra por la función ClearTimeOut ().

Veamos la salida:

Podemos ver que cuando estamos haciendo clic en el botón, repetidamente no vemos ninguna salida. Sin embargo, cuando hicimos clic en el botón la última vez y lo dejamos, vimos el mensaje de alerta después de dos segundos. Por lo tanto, podemos concluir que Cada clic llama a la función de desbloqueo y restablece el temporizador retrasando la llamada.

Conclusión

El desacreditación es una técnica de programación utilizada por los desarrolladores para limitar el número de llamadas a un evento o solo activar una función cuando es necesario o solo para un caso de uso. La técnica de desaceleración se aplica en una función que requiere mucho tiempo que tiene muchos cálculos, por lo que evitamos el llamado innecesario de esa función. Para ser específico, el desacuerdo se puede aplicar en barras de búsqueda, barras de texto sugerentes, páginas web de carga de contenido e.G Facebook, Instagram, etc.

En esta publicación, discutimos qué se desaceleró en JavaScript y echamos un vistazo a su trabajo e implementación en JavaScript.