JavaScript: debounce e throttle, domare gli eventi

Eventi come input, scroll e resize scattano decine di volte al secondo. Chiamare un'API o un calcolo pesante a ogni scatto è uno spreco. Due tecniche lo risolvono.

function debounce(fn, ms) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
}

// esegue solo 300ms DOPO l'ultimo carattere digitato
input.addEventListener("input", debounce(cerca, 300));

Il debounce aspetta che l'utente smetta (ideale per la ricerca live: chiami l'API una volta, non a ogni tasto). Il throttle, invece, esegue al massimo una volta ogni X ms a prescindere (ideale per lo scroll: aggiorni la UI a ritmo costante).

Debounce = "aspetta la pausa". Throttle = "a intervalli regolari". Sceglierne uno giusto trasforma una UI che arranca in una fluida.