febrero 3, 2021

Ejemplo de rebote en JavaScript: c贸mo retrasar esta funci贸n

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 鈥榬ebote鈥?

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 鈥渃lic鈥 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