Ottimizzazione delle prestazioni JavaScript con antirimbalzo e limitazione: esempi di codice e best practice

Il debouncing e il throttling sono due concetti importanti in JavaScript che vengono utilizzati per ottimizzare le prestazioni di determinate azioni, in particolare quelle attivate dalle interazioni dell'utente. In questo articolo, esploreremo quali sono questi concetti, come funzionano e forniremo frammenti di codice per dimostrarne l'implementazione.

Antirimbalzo

Il debouncing è una tecnica che ritarda l'esecuzione di una funzione finché non è trascorso un certo periodo di tempo dall'ultima volta che è stata chiamata. È comunemente usato per impedire che una funzione venga chiamata più volte in rapida successione, specialmente in risposta all'input dell'utente.

Supponiamo che tu abbia una barra di ricerca sul tuo sito web che suggerisce i risultati della ricerca mentre l'utente digita. Ogni volta che viene premuto un tasto, viene effettuata una chiamata API per recuperare i risultati della ricerca. Tuttavia, se l'utente digita troppo velocemente, la chiamata API potrebbe essere effettuata troppe volte, causando un carico inutile sul server e rallentando l'esperienza dell'utente.

Per evitare il rimbalzo di questa funzione di ricerca, possiamo utilizzare la setTimeout()funzione per ritardare l'esecuzione della chiamata API di un certo periodo di tempo. Se la funzione viene richiamata nuovamente entro tale periodo di tempo, il timer viene reimpostato e la funzione non verrà eseguita fino allo scadere del timer.

<input id="input" type="text" placeholder="Search..." />
const search = document.getElementById("input");
      function debounce(func, delay) {
        let time = 0;
        return (...arg) => {
          clearTimeout(time);
          time = setTimeout(() => {
            return func(...arg);
          }, delay);
        };
      }
      search.addEventListener(
        "input",
        debounce(() => {
          console.log("Search Api called!");
        }, 1500)
      );

ascoltiamo gli eventi di input nel campo di input di ricerca e chiamiamo la funzione antirimbalzo. La funzione antirimbalzo verrà eseguita solo dopo che sono trascorsi 1500 millisecondi dall'ultima volta che è stata chiamata.

Limitazione

La limitazione è una tecnica che limita la velocità con cui una funzione può essere chiamata. È comunemente usato per impedire che una funzione venga chiamata troppo frequentemente, specialmente in risposta all'input dell'utente.

Supponiamo che tu abbia un pulsante sul tuo sito web che attiva un quando viene cliccato. Ogni volta che si fa clic sul pulsante, l'animazione ricomincia. Tuttavia, se l'utente fa clic sul pulsante troppo velocemente, l'animazione potrebbe avviarsi e interrompersi ripetutamente, causando un effetto di sfarfallio e un'esperienza utente scadente.

<button id="btn">Click</button>
const button = document.getElementById("btn");
      const throttle = (func, delay) => {
        let prev = 0;
        return (...arg) => {
          let curr = new Date().getTime();
          if (curr - prev > delay) {
            prev = curr;
            return func(...arg);
          }
        };
      };
      button.addEventListener(
        "click",
        throttle(() => {
          console.log("Button is clicked");
        }, 1500)
      );