Tema
/
Interneto svetainių kliento dalies kūrimas JS

js/utils.js — debounce

Kodo stulpelyje — js/utils.js su nauju debounce. Failas jau turi datų ir teksto pagalbininkus (2, 4 pamokos); dabar prisideda debounce.

Perskaityk jį atidžiai — čia visa gudrybė trijose eilutėse:

export function debounce(fn, delay = 250) {
  let timer;                                    // išsaugotas TARP kvietimų (closure)
  return (...args) => {
    clearTimeout(timer);                        // atšauk ankstesnį planą
    timer = setTimeout(() => fn(...args), delay);  // suplanuok naują
  };
}

Du dalykai, kuriuos verta suprasti:

  • timer gyvena uždarinyje (closure). debounce grąžina funkciją, kuri „prisimena" savo timer tarp kvietimų. Kiekvienas paspaudimas mato tą patį timer ir jį atšaukia.
  • setTimeout grąžina ID, clearTimeout jį atšaukia. Jei atšauki prieš pasibaigiant delay, suplanuotas fn niekada neįvyksta. Todėl greitai spausdinant įvyksta tik paskutinis.

debounce — bendras įrankis: tinka paieškai, lango dydžio keitimui, automatiniam išsaugojimui — bet kur, kur įvykiai „lyja" dažnai, o reaguoti reikia tik nurimus.

Patarimas. 250 ms — geras kompromisas paieškai: pakankamai greitai, kad jaustųsi momentiškai, bet pakankamai ilgai, kad sugautų rašymo pauzes. Serverio paieškai dažnai imamas didesnis (300–500 ms), UI mygtukams — mažesnis. Tai derinama pagal jausmą.