Evitare troppe ricerche mentre l'utente scrive

In parole semplici

Se cerchi a ogni lettera, il codice lavora troppo. Una soluzione semplice è aspettare che l’utente smetta di scrivere per un attimo.

Questa lezione fa parte del modulo Dati, attese e richieste web. L’obiettivo del modulo è: Capire come gestire operazioni che non danno una risposta immediata.

Parole nuove

• debounce: tecnica per aspettare una pausa prima di eseguire una funzione.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una piccola dashboard che mostra dati caricati da una fonte esterna.

Esempio da copiare

let timer;

function cercaDopoPausa(testo) {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log("Cerco:", testo);
  }, 500);
}

cercaDopoPausa("j");
cercaDopoPausa("ja");
cercaDopoPausa("jav");

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Copia l’esempio.
2. Eseguilo e osserva quanti messaggi compaiono.
3. Cambia 500 in 1000.
4. Collega la funzione a un input se vuoi provarla nella pagina.
5. Spiega perché non partono tre ricerche.

Controllo finale

Hai finito quando capisci che clearTimeout annulla il timer precedente.