Paieška rašant ir debounce

Turim galeriją su nuotraukomis. Pridėkim paiešką rašant (search-as-you-type): vartotojas veda tekstą, o tinklelis iškart susitraukia iki atitinkančių nuotraukų. Kadangi duomenis jau atsisiuntėm, filtruojam kliento pusėje — be naujų užklausų į serverį.

Filtras paprastas — nejautri registrui paieška pagal pavadinimą:

pictures.filter(p => p.title.toLowerCase().includes(query.toLowerCase()));

Bet yra spąstas: kada filtruoti. Naivu — kiekvieno klavišo paspaudimo metu:

searchInput.addEventListener('input', (e) => { filterAndRender(e.target.value); });

Rašant „andromeda" tai suveiks 9 kartus — ir kiekvieną kartą perpieš visą tinklelį. Vietinei paieškai tai bent jau trūkčioja; o jei paieška eitų į serverį (kaip realiuose projektuose) — tai būtų 9 užklausos vietoj vienos, kas paspaudimą.

Sprendimas — debounce. Idėja: nedaryk nieko, kol vartotojas nesustoja rašyti. Techniškai — setTimeout ir clearTimeout:

function debounce(fn, delay = 250) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                 // atšaukiam ankstesnį suplanuotą veiksmą
    timer = setTimeout(() => fn(...args), delay);   // planuojam naują po delay
  };
}

Kiekvienas paspaudimas atšaukia ankstesnį laukimą ir planuoja naują. Suveiks tik paskutinis — kai 250 ms niekas nespaudžia. „andromeda" → viena filtracija, ne devynios.