Nel tentativo di osservare eventi JavaScript come scroll o mousemove, notiamo che avvengono un numero imprecisato di volte al secondo. A volte, se l'operazione eseguita ad ogni trigger dell'evento è complessa, l'intera interfaccia si può bloccare.

Diversamente dalla funzione debounce(), vista nello script precedente, la funzione throttle() serve a controllare la frequenza di esecuzione.

// Definizione funzione throttle
function throttle(func, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// al movimento del mouse, associo la funzione
window.addEventListener('mousemove', throttle((e) => {
  console.log(`Mouse a ${e.clientX}, ${e.clientY}`);
}, 200));

Anche se l'evento mousemove avviene centinaia di volte al secondo, il console.log() verrà mostrato solo una volta ogni 200ms, evitando così un sovraccarico di operazioni e migliorando le prestazioni dell'applicazione.