A continuación, presentamos un ejemplo de rebote en JavaScript: cómo retrasar esta función que ayuda a los códigos escritos.
En JavaScript, una función antirrebote asegura que su código solo se active una vez por entrada de usuario. Las sugerencias de cuadro de búsqueda, el guardado automático de campos de texto y la eliminación de clics de doble botón son otros casos de uso para la función antirrebote.
¿Qué es el ‘rebote’?
El término rebote proviene de la asignatura de electrónica, por ejemplo, cuando se presiona un botón en el control remoto del televisor, la señal viaja al microchip del control remoto tan rápido que antes de que pueda soltar el botón, rebota y el microchip, por lo que registra el “clic” varias veces.
Para mitigar esto, una vez que se recibe una señal del botón, el microchip deja de procesar las señales del botón durante unos microsegundos, mientras que es físicamente imposible presionarlo nuevamente.
Rebote en JavaScript
En JavaScript, el caso de uso es similar, al momento de activar una función, pero solo una vez por caso de uso.
En el caso de que se desee mostrar sugerencias para una consulta de búsqueda, pero solo después de que un visitante la haya escrito.
O en otro caso, se desea guardar cambios en un formulario, pero solo cuando el usuario no está trabajando activamente en esos cambios, ya que cada “almacenamiento” cuesta un viaje a la base de datos.
También esto aplica en Windows 95 a la hora de que los usuarios hacen doble clic en todo
Esta es una implementación sencilla de la eliminación de rebote función:
function debounce(func, timeout = 300){
let timer;
return (…args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
function saveInput(){
console.log(‘Saving data’);
}
const processChange = debounce(() => saveInput());
Se puede utilizar en una entrada:
<input type=”text” onkeyup=”processChange()” />
O un botón:
<button onclick=”processChange()”>Click me</button>
O ya sea en un evento de ventana:
window.addEventListener(“scroll”, processChange);
Entonces podemos decir que el rebote tiene una función especial que se encarga de dos tareas, la primera es asignar un alcance para la variable de temporizador y la segunda es programar su función para que se active en un momento específico
Cuando un visitante escribe la primera letra y suelta la tecla, la rebote de primera reinicia el temporizador con clearTimeout (timer). En este punto, el paso no es necesario ya que aún no hay nada programado. Luego, se debe de programar la función proporcionada saveInput() para que se invoque en 300 ms.
Pero puede ser que el visitante sigue escribiendo, por lo que cada lanzamiento de tecla activa tiene un rebote nuevo. Cada invocación debe restablecer el temporizador o, en otras palabras, cancelar los planes anteriores con saveInput() y reprogramarlo para otro lapso, como es 300 ms en el futuro. Esto continúa mientras el visitante sigue presionando las teclas por debajo de 300 ms.
La última programación no se borrará, por lo saveInput() se asignará.
Cómo ignorar eventos posteriores
¿Qué pasa con el caso de uso con varios clics de un solo botón? No queremos esperar el último clic, sino registrar el primero e ignorar el resto, por lo que se debe de considerar lo siguiente:
function debounce_leading(func, timeout = 300){
let timer;
return (…args) => {
if (!timer) {
func.apply(this, args);
}
clearTimeout(timer);
timer = setTimeout(() => {
timer = undefined;
}, timeout);
};
}
En este caso se activa función saveInput() en la primera llamada debounce_leading causada por el primer clic del botón. Se debe de programar la destrucción del temporizador para 300 ms.
Cada clic de botón subsecuente dentro de ese período de tiempo tendrá el temporizador definido y solo empujará la destrucción 300 ms hacia el futuro.
Leíste: Ejemplo de rebote en JavaScript: cómo retrasar esta función, te recomendamos: Guía básica de declaración If del operador ternario en JavaScript
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
