Debounce and Throttle in JavaScript: Kas tai ir kaip naudoti?

Jei kada nors dirbote su JavaScript, tikrai susidūrėte su tokiomis funkcijomis kaip "debounce" ir "throttle". Tai du svarbūs įrankiai, kurie gali padėti valdyti įvykių apdorojimą ir optimizuoti programų našumą. Šiame straipsnyje paaiškinsime, kas yra debounce ir throttle funkcijos, kodėl jos yra svarbios ir pateiksime praktinių pavyzdžių, kaip jas naudoti.

Kas yra "debounce" ir kodėl tai naudinga?

Debounce funkcija naudojama siekiant apriboti funkcijos vykdymo dažnį, kad ji būtų iškviečiama tik tada, kai nebevykdomas joks įvykis tam tikrą laiką. Pavyzdžiui, jei vartotojas greitai rašo į paieškos laukelį, "debounce" užtikrina, kad funkcija bus iškviečiama tik tada, kai vartotojas nustos rašyti. Tai leidžia sumažinti nereikalingus serverio užklausas arba per didelį skaičiavimo krūvį.

Debounce dažniausiai naudojamas su tokiais įvykiais kaip "keyup" (klavišo paspaudimas) arba "scroll" (slinkimas). Tai puikus būdas užtikrinti, kad jūsų aplikacija nesusidurtų su per dideliu apdorojimo kiekiu dėl nuolatinio įvykių vykdymo.

Štai kaip galima implementuoti "debounce" funkciją JavaScript:

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

Ši funkcija grąžina naują funkciją, kuri užtikrina, kad pradinis "func" bus iškviečiamas tik tada, kai nebus įvykdyta jokių kitų įvykių per nustatytą vėlavimo laiką (delay).

Kas yra "throttle" ir kada naudoti?

Throttle funkcija yra panaši į debounce, tačiau ji veikia šiek tiek kitaip. "Throttle" užtikrina, kad funkcija būtų iškviečiama tik kas tam tikrą laiką, nepriklausomai nuo to, kiek kartų įvyksta įvykiai. Tai ypač naudinga, kai turime nuolatinius, tačiau nesvarbius įvykius, tokius kaip slinkimas arba mygtuko paspaudimas, ir nenorime, kad programa per dažnai vykdytų sudėtingas funkcijas.

Pavyzdžiui, jei jūs naudojate slinkimo funkciją, kuri tikrina, ar vartotojas pasiekė puslapio apačią, "throttle" užtikrina, kad ši funkcija nebūtų iškviečiama kiekvieną kartą, kai vartotojas slenka. Vietoj to, ji bus iškviečiama tik kas 200 milisekundžių, taip sumažinant našumo krūvį.

Štai kaip atrodytų "throttle" funkcijos implementacija:

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

Kaip matome, "throttle" funkcija leidžia valdyti funkcijos iškvietimo tempą ir užtikrina, kad ji nebūtų iškviečiama pernelyg dažnai, taip optimizuodama našumą.

Debounce ir Throttle: Kuo jie skiriasi?

Debounce ir throttle turi panašumų, tačiau jų tikslas ir veikimas skiriasi. Pagrindinis skirtumas yra tai, kad debounce leidžia funkcijai būti iškviečiama tik tada, kai įvykiai baigiasi, o throttle leidžia funkcijai būti iškviečiama tik tam tikru laiko intervalu, net jei įvykiai tęsiasi.

Trumpai tariant:

• Debounce: Funkcija iškviečiama tik tada, kai įvykiai baigiasi ir nėra įvykdytų įvykių tam tikrą laiką.
• Throttle: Funkcija iškviečiama tik kas tam tikrą laiką, nepriklausomai nuo to, kiek kartų įvyksta įvykiai.

Kada naudoti debounce ir throttle?

Debounce geriausiai tinka situacijose, kai reikia užkirsti kelią dažniems funkcijų iškvietimams, tokiems kaip paieškos lauko įvedimas arba formų validavimas. Pavyzdžiui, jeigu vartotojas rašo į paieškos laukelį ir norite atlikti užklausą tik tada, kai jis baigia rašyti, tai yra puikus atvejis naudoti debounce.

Throttle, kita vertus, yra puikus sprendimas nuolatiniams įvykiams, pvz., slinkimui arba judėjimo stebėjimui. Jei turite funkciją, kuri tikrina vartotojo poziciją puslapyje, tačiau nenorite, kad ši funkcija būtų iškviečiama kiekvieną kartą, kai vartotojas slenka, "throttle" suteikia jums galimybę ją iškviesti tik kas tam tikrą laiką, pvz., kas 200ms.

Debounce ir Throttle: Pavyzdžiai

Pažvelkime į paprastus pavyzdžius, kurie parodo, kaip naudoti debounce ir throttle su įvykių klausytojais.

Debounce Pavyzdys:

const searchInput = document.getElementById('search');

searchInput.addEventListener('input', debounce(function() {
  console.log('Paieška: ', searchInput.value);
}, 300));

Šiame pavyzdyje paieškos įvedimo laukas naudoja "debounce", kad įvykdytų paiešką tik tada, kai vartotojas nustos rašyti ir po 300 milisekundžių. Tai užtikrina, kad serverio užklausos bus siunčiamos tik tada, kai vartotojas baigs įvesti tekstą.

Throttle Pavyzdys:

window.addEventListener('scroll', throttle(function() {
  console.log('Vartotojas slenka');
}, 200));

Šiame pavyzdyje, naudojant "throttle", slinkimo įvykis bus iškviečiamas tik kas 200 milisekundžių, nepaisant to, kaip greitai vartotojas slenka puslapį.

Baigiamasis žodis

Debounce ir throttle yra svarbios technikos, kurios padeda valdyti įvykių apdorojimą ir optimizuoti našumą JavaScript programose. Sužinoję, kada ir kaip naudoti šias funkcijas, galėsite kurti efektyvesnes ir greitesnes aplikacijas. Nesvarbu, ar jūs dirbate su paieškos laukais, slinkimu ar kitais įvykiais, šie įrankiai suteikia jums galimybę valdyti, kaip ir kada funkcijos bus iškviečiamos, kas gali turėti didelės įtakos programų našumui.