JavaScript Throttling vs Debouncing: Sündmuste sageduse piiramise strateegiad

Kaasaegses veebiarenduses on sündmuste tõhus käsitlemine oluline, et luua reageerivaid ja suure jõudlusega rakendusi. Sündmused nagu kerimine, akna suuruse muutmine, klahvivajutused ja hiireliigutused võivad käivitada funktsioone, mis täidetakse korduvalt, põhjustades potentsiaalselt jõudluse kitsaskohti ja halba kasutajakogemust. Selle lahendamiseks pakub JavaScript kahte võimsat tehnikat: throttling ja debouncing. Need on sündmuste sageduse piiramise strateegiad, mis aitavad kontrollida, kui sageli sündmuste käsitlejaid täidetakse, vältides liigset ressursside tarbimist ja parandades rakenduse üldist jõudlust.

Probleemi mõistmine: kontrollimatu sündmuste käivitamine

Kujutage ette stsenaariumi, kus soovite rakendada reaalajas otsingufunktsiooni. Iga kord, kui kasutaja sisestab otsingukasti tähe, soovite käivitada funktsiooni, mis hangib serverist otsingutulemusi. Ilma sageduse piiramiseta kutsutakse seda funktsiooni välja pärast iga klahvivajutust, mis võib tekitada suure hulga ebavajalikke päringuid ja serverit üle koormata. Sarnased probleemid võivad tekkida kerimissündmustega (nt sisu juurde laadimine kasutaja kerimisel), akna suuruse muutmise sündmustega (nt paigutuse mõõtmete ümberarvutamine) ja hiireliigutamise sündmustega (nt interaktiivse graafika loomine).

Näiteks vaatleme järgmist (naiivset) JavaScripti koodi:

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

searchInput.addEventListener('keyup', function(event) {
  // This function will be called on every keyup event
  console.log('Fetching search results for:', event.target.value);
  // In a real application, you would make an API call here
  // fetchSearchResults(event.target.value);
});

            

              
                Copy
              
            
          

See kood käivitaks otsingupäringu *iga* klahvivajutuse peale. Throttling ja debouncing pakuvad tõhusaid lahendusi nende täitmiste sageduse kontrollimiseks.

Throttling: Sündmuste täitmise sageduse reguleerimine

Throttling tagab, et funktsioon täidetakse maksimaalselt üks kord määratud ajavahemiku jooksul. See piirab funktsiooni väljakutsumise sagedust, isegi kui seda käivitav sündmus toimub sagedamini. Mõelge sellele kui väravavahile, kes laseb iga X millisekundi järel läbi ainult ühe täitmise. Kõik järgnevad käivitused selle intervalli jooksul ignoreeritakse, kuni intervall lõpeb.

Kuidas throttling töötab

1. Kui sündmus käivitatakse, kontrollib throttled-funktsioon, kas see on lubatud ajavahemikus.
2. Kui intervall on möödunud, täidetakse funktsioon ja intervall lähtestatakse.
3. Kui intervall on endiselt aktiivne, ignoreeritakse funktsiooni, kuni intervall lõpeb.

Throttling'u implementatsioon

Siin on throttling-funktsiooni põhiline implementatsioon JavaScriptis:

            
function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const context = this;
    const currentTime = new Date().getTime();

    if (!lastExecTime || (currentTime - lastExecTime >= delay)) {
      func.apply(context, args);
      lastExecTime = currentTime;
    } else {
      // Optionally, you could schedule a delayed execution here
      // to ensure the last invocation eventually happens.
    }
  };
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon throttle võtab kaks argumenti: funktsioon, mida piirata (func) ja viivitus millisekundites (delay).
• See tagastab uue funktsiooni, mis toimib algse funktsiooni throttled-versioonina.
• Tagastatud funktsiooni sees kontrollitakse, kas viimasest täitmisest on möödunud piisavalt aega (currentTime - lastExecTime >= delay).
• Kui viivitus on möödunud, täidab see algse funktsiooni kasutades func.apply(context, args), uuendab lastExecTime väärtust ja lähtestab taimeri.
• Kui viivitus pole möödunud, jäetakse funktsioon vahele. Keerukam versioon võiks ajastada viivitusega täitmise, et tagada viimase väljakutse toimumine, kuid see on sageli ebavajalik.

Throttling'u näide: Kerimissündmus

Rakendame throttling'ut kerimissündmusele, et piirata funktsiooni sagedust, mis uuendab edenemisriba vastavalt kerimisasendile:

            
function updateProgressBar() {
  const scrollPosition = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = (scrollPosition / documentHeight) * 100;
  document.getElementById('progress-bar').style.width = scrollPercentage + '%';
  console.log('Scroll percentage:', scrollPercentage);
}

const throttledUpdateProgressBar = throttle(updateProgressBar, 250); // Throttle to 4 times per second

window.addEventListener('scroll', throttledUpdateProgressBar);

            

              
                Copy
              
            
          

Selles näites kutsutakse funktsiooni updateProgressBar maksimaalselt iga 250 millisekundi järel, sõltumata sellest, kui sageli kerimissündmus käivitatakse. See takistab edenemisriba liiga kiiret uuendamist ja liigset ressursside tarbimist.

Throttling'u kasutusjuhud

• Kerimissündmused: Funktsioonide sageduse piiramine, mis laadivad rohkem sisu, uuendavad kasutajaliidese elemente või teevad arvutusi kerimisasendi põhjal.
• Akna suuruse muutmise sündmused: Funktsioonide täitmise kontrollimine, mis arvutavad ümber paigutuse mõõtmeid või kohandavad kasutajaliidese elemente akna suuruse muutmisel.
• Hiireliigutamise sündmused: Funktsioonide sageduse reguleerimine, mis jälgivad hiire liikumist interaktiivse graafika või animatsioonide jaoks.
• Mänguarendus: Mängutsükli uuenduste haldamine ühtlase kaadrisageduse säilitamiseks.
• API-kutsed: Liigsete API-päringute vältimine, piirates sagedust, millega funktsioon teeb võrgukutseid. Näiteks asukohaandmete hankimine GPS-sensoritest iga 5 sekundi järel on paljude rakenduste jaoks üldiselt piisav; pole vaja neid hankida kümneid kordi sekundis.

Debouncing: Sündmuse täitmise edasilükkamine kuni tegevusetuseni

Debouncing lükkab funktsiooni täitmise edasi, kuni on möödunud määratud tegevusetuse periood. See ootab teatud aja pärast viimast sündmuse käivitamist enne funktsiooni täitmist. Kui selle aja jooksul käivitatakse uus sündmus, lähtestatakse taimer ja funktsiooni täitmist lükatakse uuesti edasi. Mõelge sellele kui ootamisele, kuni keegi lõpetab tippimise, enne kui otsingutulemusi soovitatakse.

Kuidas debouncing töötab

1. Kui sündmus käivitatakse, käivitatakse taimer.
2. Kui enne taimeri aegumist käivitatakse uus sündmus, lähtestatakse taimer.
3. Kui taimer aegub ilma uute sündmuste käivitamiseta, täidetakse funktsioon.

Debouncing'u implementatsioon

Siin on debouncing-funktsiooni põhiline implementatsioon JavaScriptis:

            
function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    const context = this;
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon debounce võtab kaks argumenti: funktsioon, mida edasi lükata (func) ja viivitus millisekundites (delay).
• See tagastab uue funktsiooni, mis toimib algse funktsiooni debounced-versioonina.
• Tagastatud funktsiooni sees tühistab see olemasoleva taimeri kasutades clearTimeout(timeoutId).
• Seejärel seab see uue taimeri kasutades setTimeout, mis täidab algse funktsiooni pärast määratud viivitust.
• Kui enne taimeri aegumist käivitatakse uus sündmus, tühistab clearTimeout olemasoleva taimeri ja seab uue, lähtestades seega viivituse.

Debouncing'u näide: Reaalajas otsing

Rakendame debouncing'ut reaalajas otsingufunktsioonile, et vältida liigseid API-kutseid. Otsingufunktsioon täidetakse alles siis, kui kasutaja on teatud aja jooksul tippimise lõpetanud:

            
function fetchSearchResults(query) {
  console.log('Fetching search results for:', query);
  // In a real application, you would make an API call here
  // fetch('/api/search?q=' + query)
  //   .then(response => response.json())
  //   .then(data => displaySearchResults(data));
}

const debouncedFetchSearchResults = debounce(fetchSearchResults, 300); // Debounce for 300 milliseconds

const searchInput = document.getElementById('search-input');
searchInput.addEventListener('keyup', (event) => {
  debouncedFetchSearchResults(event.target.value);
});

            

              
                Copy
              
            
          

Selles näites kutsutakse funktsiooni fetchSearchResults alles 300 millisekundit pärast seda, kui kasutaja on tippimise lõpetanud. See takistab rakendusel tegemast API-kutseid pärast iga klahvivajutust ja vähendab oluliselt serveri koormust. Kui kasutaja tipib väga kiiresti, käivitab API-kutse ainult viimane otsingupäring.

Debouncing'u kasutusjuhud

• Reaalajas otsing: Otsingupäringute täitmise edasilükkamine, kuni kasutaja on tippimise lõpetanud.
• Tekstisisendi valideerimine: Kasutaja sisendi valideerimine pärast tippimise lõpetamist, mitte iga klahvivajutuse peale.
• Akna suuruse muutmine: Paigutuse mõõtmete ümberarvutamine või kasutajaliidese elementide kohandamine pärast seda, kui kasutaja on akna suuruse muutmise lõpetanud.
• Nupuklõpsud: Juhuslike topeltklõpsude vältimine, lükates edasi nupuklõpsuga seotud funktsiooni täitmist.
• Automaatne salvestamine: Dokumendi muudatuste automaatne salvestamine pärast seda, kui kasutaja on teatud aja jooksul olnud mitteaktiivne. Seda kasutatakse sageli veebipõhistes redaktorites ja tekstitöötlusprogrammides.

Throttling vs. Debouncing: Peamised erinevused

Kuigi nii throttling kui ka debouncing on sündmuste sageduse piiramise strateegiad, teenivad nad erinevaid eesmärke ja sobivad kõige paremini erinevatesse stsenaariumitesse. Siin on tabel, mis võtab kokku peamised erinevused:

Millal kasutada throttling'ut

Kasutage throttling'ut, kui peate tagama, et funktsiooni täidetakse regulaarse intervalliga, isegi kui sündmus käivitatakse sageli. See on kasulik stsenaariumide puhul, kus soovite uuendada kasutajaliidese elemente või teha arvutusi pidevate sündmuste, näiteks kerimise, suuruse muutmise või hiireliigutuste põhjal.

Näide: Kujutage ette, et jälgite kasutaja hiire asukohta, et kuvada vihjet (tooltip). Te ei pea vihjet uuendama *iga* kord, kui hiir liigub – selle uuendamine mitu korda sekundis on tavaliselt piisav. Throttling tagab, et vihje asukohta uuendatakse mõistliku sagedusega, ilma brauserit üle koormamata.

Millal kasutada debouncing'ut

Kasutage debouncing'ut, kui soovite funktsiooni täita alles pärast seda, kui sündmuse allikas on lõpetanud sündmuse käivitamise määratud aja jooksul. See on kasulik stsenaariumide puhul, kus soovite tegevuse sooritada pärast seda, kui kasutaja on lõpetanud suhtlemise sisendväljaga või akna suuruse muutmise.

Näide: Mõelge veebivormile, mis valideerib e-posti aadressi. Te ei soovi e-posti aadressi valideerida pärast iga klahvivajutust. Selle asemel peaksite ootama, kuni kasutaja on tippimise lõpetanud, ja seejärel valideerima e-posti aadressi. Debouncing tagab, et valideerimisfunktsioon täidetakse ainult üks kord pärast seda, kui kasutaja on teatud aja jooksul tippimise lõpetanud.

Täiustatud throttling'u ja debouncing'u tehnikad

Eespool toodud throttling'u ja debouncing'u põhilisi implementatsioone saab veelgi täiustada, et käsitleda keerukamaid stsenaariume.

Leading ja Trailing valikud

Mõned throttling'u ja debouncing'u implementatsioonid pakuvad valikuid, et kontrollida, kas funktsioon täidetakse määratud ajavahemiku alguses (leading edge) või lõpus (trailing edge). Need on sageli Boole'i lipud või loetletud väärtused.

• Leading edge: Täidab funktsiooni kohe, kui sündmus esmakordselt käivitatakse, ja seejärel maksimaalselt üks kord määratud intervalli jooksul.
• Trailing edge: Täidab funktsiooni pärast määratud intervalli möödumist, isegi kui sündmust endiselt käivitatakse.

Need valikud võivad olla kasulikud throttling'u ja debouncing'u käitumise peenhäälestamiseks vastavalt konkreetsetele nõuetele.

Kontekst ja argumendid

Eespool toodud throttling'u ja debouncing'u implementatsioonid säilitavad piiratava või edasilükatava funktsiooni algse konteksti (this) ja argumendid. See tagab, et funktsioon käitub täitmisel ootuspäraselt.

Mõnel juhul võib aga olla vajalik konteksti selgesõnaliselt siduda või argumente muuta enne nende funktsioonile edastamist. Seda saab saavutada funktsiooniobjekti meetoditega call või apply.

Teegid ja raamistikud

Paljud JavaScripti teegid ja raamistikud pakuvad sisseehitatud throttling'u ja debouncing'u implementatsioone. Need implementatsioonid on sageli robustsemad ja funktsioonirikkamad kui eespool toodud põhilised implementatsioonid. Näiteks Lodash pakub funktsioone _.throttle ja _.debounce.

            
// Using Lodash's _.throttle
const throttledUpdateProgressBar = _.throttle(updateProgressBar, 250);

// Using Lodash's _.debounce
const debouncedFetchSearchResults = _.debounce(fetchSearchResults, 300);

            

              
                Copy
              
            
          

Nende teekide kasutamine võib teie koodi lihtsustada ja vähendada vigade riski.

Parimad tavad ja kaalutlused

• Valige õige tehnika: Kaaluge hoolikalt, kas throttling või debouncing on teie konkreetse stsenaariumi jaoks parim lahendus.
• Häälestage viivitust: Katsetage erinevate viivitusväärtustega, et leida optimaalne tasakaal reageerimisvõime ja jõudluse vahel.
• Testige põhjalikult: Testige oma throttled- ja debounced-funktsioone põhjalikult, et tagada nende ootuspärane käitumine erinevates stsenaariumides.
• Mõelge kasutajakogemusele: Throttling'u ja debouncing'u rakendamisel pidage silmas kasutajakogemust. Vältige liiga pikki viivitusi, kuna need võivad muuta rakenduse aeglaseks.
• Juurdepääsetavus: Olge teadlik, kuidas throttling ja debouncing võivad mõjutada puuetega kasutajaid. Veenduge, et teie rakendus jääb kõigile kasutajatele juurdepääsetavaks ja kasutatavaks. Näiteks kui teete klaviatuurisündmusele debouncing'ut, kaaluge alternatiivsete viiside pakkumist funktsiooni käivitamiseks kasutajatele, kes ei saa klaviatuuri kasutada.
• Jõudluse jälgimine: Kasutage brauseri arendaja tööriistu oma throttled- ja debounced-funktsioonide jõudluse jälgimiseks. Tuvastage kõik jõudluse kitsaskohad ja optimeerige oma koodi vastavalt. Mõõtke kaadrisagedust (FPS) ja protsessori kasutust, et mõista oma muudatuste mõju.
• Mobiilseadmete kaalutlused: Mobiilseadmetel on lauaarvutitega võrreldes piiratud ressursid. Seetõttu on throttling ja debouncing mobiilirakenduste jaoks veelgi olulisemad. Kaaluge mobiilseadmetes lühemate viivituste kasutamist reageerimisvõime säilitamiseks.

Kokkuvõte

Throttling ja debouncing on olulised tehnikad sündmuste käsitlemise optimeerimiseks ja veebirakenduste jõudluse parandamiseks. Kontrollides sündmuste käsitlejate täitmise sagedust, saate vältida liigset ressursside tarbimist, vähendada serveri koormust ja luua reageerivama ning nauditavama kasutajakogemuse. Throttling'u ja debouncing'u erinevuste mõistmine ja nende asjakohane rakendamine võib oluliselt parandada teie veebirakenduste jõudlust ja skaleeritavust.

Hoolikalt kaaludes kasutusjuhte ja häälestades parameetreid, saate neid tehnikaid tõhusalt ära kasutada, et luua suure jõudlusega, kasutajasõbralikke veebirakendusi, mis pakuvad sujuvat kogemust kasutajatele üle kogu maailma.

Pidage meeles, et neid tehnikaid tuleb kasutada vastutustundlikult ning arvestada nende mõju kasutajakogemusele ja juurdepääsetavusele. Väikese planeerimise ja katsetamisega saate throttling'u ja debouncing'u selgeks ning avada JavaScripti sündmuste käsitlemise täieliku potentsiaali.

Edasine uurimine: Uurige implementatsioone, mis on saadaval teekides nagu Lodash ja Underscore. Tutvuge requestAnimationFrame'iga animatsiooniga seotud throttling'u jaoks. Kaaluge kohandatud sündmuste kasutamist koos throttling'u/debouncing'uga komponentidevaheliseks suhtluseks.