Comprender las funciones antirrebote y de aceleración en JavaScript

Función antirrebote

La función antirrebote retrasa la ejecución de una función hasta que haya pasado un cierto tiempo desde la última vez que se activó el evento. Si el evento se activa con frecuencia, la ejecución de la función se pospondrá y solo cuando haya una pausa en la activación del evento, se ejecutará la función.

Escenarios de aplicación de la función antirrebote:

• Campos de entrada con entrada frecuente del usuario, como operaciones de búsqueda o envío.
• Clics frecuentes en botones que desencadenan ciertas acciones.
• Escuchar eventos de desplazamiento en una página web para operaciones específicas.
• Manejar los eventos de cambio de tamaño del navegador de manera más eficiente.

Ejemplo de función antirrebote:

function myDebounce(fn, delay) {
  let timer = null;

  const debounceFn = function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };

  return debounceFn;
}

// Usage example:
const inputEl = document.querySelector("input");
let count = 0;

const inputChange = function() {
  count++;
  console.log("Sending network request", count, this.value);
};

// Implement debounce
inputEl.oninput = myDebounce(inputChange, 1000);

Función del acelerador

La función de aceleración ejecuta una función a intervalos regulares. Garantiza que, independientemente de cuántas veces se active el evento dentro del intervalo, la función se ejecute solo una vez durante ese intervalo.

Escenarios de aplicación de la función del acelerador:

• Limitar la ejecución de una función cuando se manejan interacciones frecuentes del usuario, como clics en botones.
• Manejar eventos relacionados con el movimiento del mouse o el desplazamiento de manera controlada.

Ejemplo de función del acelerador:

function myThrottle(fn, interval) {
  let lastTime = 0;

  const throttleFn = function() {
    const nowTime = new Date().getTime();
    const waitTime = interval - (nowTime - lastTime);

    if (waitTime <= 0) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  };

  return throttleFn;
}

// Usage example:
const buttonEl = document.querySelector("button");
let count = 0;

const throttleFn = function(event) {
  count++;
  console.log("Response count", count, this, event);
};

// Implement throttle
buttonEl.onclick = myThrottle(throttleFn, 1000);

Optimización de las funciones antirrebote y aceleración

1. thisContexto vinculante : para garantizar el thiscontexto correcto dentro de la función rebotada o limitada, utilice applyo callal invocar la función original.
2. Pasar argumentos adicionales : para pasar argumentos adicionales a la función rebotada o limitada, extienda el argumentsobjeto o páselo directamente al invocar la función original.
3. Ejecución inmediata (por primera vez) : para ejecutar la función inmediatamente en el primer evento, utilice un parámetro adicional (p. ej., immediate) en la función antirrebote o de aceleración. Si immediatees así true, la función se ejecutará inmediatamente en el primer evento.

Estas funciones antirrebote y aceleración pueden ayudar a optimizar el rendimiento y mejorar la experiencia del usuario en diversos escenarios, especialmente cuando se manejan interacciones frecuentes del usuario y se reducen las llamadas a funciones innecesarias.