La eliminación de rebotes en JavaScript es una práctica utilizada para mejorar el rendimiento del navegador. Puede haber alguna funcionalidad en una página web que requiera cálculos que consuman mucho tiempo. Si dicho método se invoca con frecuencia, podría afectar en gran medida el rendimiento del navegador, ya que JavaScript es un lenguaje de un solo subproceso. La eliminación de rebotes es una práctica de programación utilizada para garantizar que las tareas que consumen mucho tiempo no se activen con tanta frecuencia que detengan el rendimiento de la página web. En otras palabras, limita la velocidad a la que se invoca una función.
<html>
<body>
<button id="debounce">
Debounce
</button>
<script>
var button = document.getElementById("debounce");
const debounce = (func, delay) => {
let debounceTimer
return function() {
const context = this
const args = arguments
clearTimeout(debounceTimer)
debounceTimer
= setTimeout(() => func.apply(context, args), delay)
}
}
button.addEventListener('click', debounce(function() {
alert("Hello\nNo matter how many times you" +
"click the debounce button, I get " +
"executed once every 3 seconds!!")
}, 3000));
</script>
</body>
</html>
Salida: Alertbox después de 3 segundos
Hello No matter how many times you click the debounce button, I get executed once every 3 seconds!!
Explicación:
El botón está adjunto a un detector de eventos que llama a la función antirrebote. La función de rebote se proporciona con 2 parámetros: una función y un número.
Declaró una variable debounceTimer, que como sugiere el nombre, se usa para llamar a la función, recibida como un parámetro después de un intervalo de milisegundos de ‘retraso’.
Si se hace clic en el botón de rebote solo una vez, se llama a la función de rebote después del retraso. Sin embargo, si se hace clic una vez en el botón de rebote y se vuelve a hacer clic antes de que finalice el retraso, el retraso inicial se borra y se inicia un nuevo temporizador de retraso. La función clearTimeout se está utilizando para lograrlo.
La idea general para la eliminación de rebotes es:
1. Comience con 0 tiempo de espera
2. Si se vuelve a llamar a la función de rebote, restablezca el temporizador al retraso especificado
3. En caso de tiempo de espera, llame a la función de rebote
Por lo tanto, cada llamada a una función de rebote, se reinicia el temporizador y retrasa la llamada.
Aplicación:
la eliminación de rebotes se puede aplicar en la implementación de texto sugerente, donde esperamos que el usuario deje de escribir durante unos segundos antes de sugerir el texto. por lo tanto, en cada pulsación de tecla, esperamos unos segundos antes de dar sugerencias.
Otra aplicación de eliminación de rebotes es en páginas web de carga de contenido como Facebook y Twitter, donde el usuario sigue desplazándose. En estos escenarios, si el evento de desplazamiento se activa con demasiada frecuencia, puede haber un impacto en el rendimiento, ya que contiene muchos videos e imágenes. Por lo tanto, el evento de desplazamiento debe hacer uso de la eliminación de rebotes.
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por JayantaTalukdar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA