Rebote de JavaScript
-
Mecanismo de la función
antirrebotede JavaScript -
Utilice el método
lodash debouncepara un mejor rendimiento
El accionamiento de la función antirrebote no es un método explícito que se pueda instanciar con los selectores. Su definición comprende un temporizador, una función devuelta y los contextos.
Además de este “rebote” explícito, tenemos “rebounce de jQuery”, “rebounce de lodash” y “rebounce de subrayado.js”. Para la visualización, pondremos los ejemplos en la siguiente sección.
El caso de uso probablemente haya quedado obsoleto en el caso del rebote de jQuery. Hay una amplia gama de debates y demostraciones aún disponibles en línea, pero las versiones anteriores y más recientes de jQuery no ofrecen ningún resultado; más bien, la implementación dice que la función $.debounce no existe.
Sin embargo, examinaremos dos ejemplos aquí, con la implementación básica del mecanismo debounce y el método lodash debounce. lodash se considera superior a la convención underscore.js.
Así que nos centraremos en el rebote de lodash. A pesar del sistema básico para esta función, también puede tomar algunos otros parámetros.
Esto también es en aras de un mejor rendimiento. Puede redirigir a este portal para una mejor comprensión de lodash debounce.
Mecanismo de la función antirrebote de JavaScript
La necesidad básica de usar la función de rebote es reducir las acciones no deseadas y, por lo tanto, limitar el retraso de la función. Ahora podría surgir la pregunta de cómo se está logrando un mejor rendimiento por un retraso.
Bueno, consideremos un método de alerta de la ventana. Lo que sucede es que cuando hacemos clic en un botón activado correspondiente a la alerta, se disparará.
Pero si el usuario repite el clic rápidamente uno tras otro, verá que el mensaje de alerta ofrece una vista previa desigual o solo una acción de llamada. Esto se debe a la falta de un buen rendimiento.
A cada clic o disparador le sigue un tiempo de aceptación de la señal, y el resto de la acción se dispara en función de ello. Cuando estamos escribiendo en un cuadro de búsqueda, cada pulsación de tecla da resultados filtrados actualizados.
Esta es también una implementación de esta función antirrebote, que dice, “no importa cuánto me hagas clic o me actives, solo operaré después del tiempo que se me pida retrasar”. Entonces, si alguien hace clic en un botón abruptamente, mostrará su función después del tiempo de espera mencionado.
Aquí, en la instancia, tenemos un temporizador, que se borra cada vez que se activa la función. Y cuando se dirige otro clic, si el tiempo de retraso es mayor que la diferencia entre los clics, la función restablecerá el conteo de tiempo nuevamente.
Y seguirá el último clic y comenzará a contar el tiempo y previsualizará la tarea.
Fragmento de código:
<html>
<body>
<button id="db">Debounce</button>
<script>
var btn = document.getElementById("db");
const debounce = (func, delay) => {
let Timer
return function() {
clearTimeout(Timer)
Timer
= setTimeout(() => func.apply(this, arguments), delay)
}
}
btn.addEventListener('click', debounce(function() {
alert("Executing after a sec!!")
}, 1000));
</script>
</body>
</html>
Producción:
Entonces, nuestra función de rebote toma dos parámetros, el tiempo de retardo y el contexto. En cada llamada, el tiempo de retardo se borra y comienza de nuevo.
Por lo tanto, se garantiza un cierto retraso de tiempo y, a pesar del comportamiento del usuario en la función de activación, el rebote interno devuelve una función de rebote que no es más que la función en la que estamos trabajando limitada por un marco de tiempo.
Utilice el método lodash debounce para un mejor rendimiento
En esta biblioteca lodash especificada, tenemos un método _.debounce predefinido que toma la función, el retraso y otro parámetro opcional. Por lo tanto, no requerimos definir explícitamente las restricciones claras y establecidas en el tiempo.
Más bien se abstrae, y podemos realizar la función de eliminación de rebotes simplemente llamándolo.
Fragmento de código:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button id="db">Debounce</button>
<script>
var db = document.getElementById("db");
var debounce = _.debounce(function(){
alert("Wait for a sec!")
}, 1000, {'leading':false})
db.addEventListener('click', debounce);
</script>
</body>
</html>
Producción:
