Debounce - Jinsi ya Kuchelewesha Kitendakazi(Function) katika JavaScript (Mfano wa JS ES6)

Original article: Debounce – How to Delay a Function in JavaScript (JS ES6 Example)

Katika JavaScript, kitendakazi cha debounce huhakikisha kwamba msimbo wako umeanzishwa mara moja tu kwa kila ingizo la mtumiaji. Mapendekezo ya kisanduku cha kutafutia, kuhifadhi kiotomatiki kwa uga wa maandishi, na kuondoa mibofyo ya vitufe viwili vyote ni visa vya utumiaji wa debounce.

Katika somo hili, tutajifunza jinsi ya kuunda kitendakazi cha debounce katika JavaScript.

Debounce ni nini?

Neno debounce linatokana na elekroniki. Unapobofya kitufe, tuseme kwenye rimoti ya runinga, mawimbi husafiri hadi kwenye microchip ya rimoti kwa haraka sana kwamba kabla ya kuachilia kitufe, hudunda, na microchip husajili "mibonyezo" mara nyingi.

Ili kupunguza hili, mara tu ishara kutoka kwa kitufe inapopokelewa, microchip huacha kuchakata mawimbi kutoka kwa kitufe kwa sekunde chache huku haiwezekani kuibonyeza tena.

Debounce katika JavaScript

Katika JavaScript, matumizi yanafanana. Tunataka kuanzisha kitendakazi, lakini mara moja tu kwa kila matumizi.

Tuseme kwamba tunataka kuonyesha mapendekezo kwa ajili ya ulizo, lakini tu baada ya mtumiaji kumaliza kuandika.

Au tunataka kuhifadhi mabadiliko kwenye fomu, lakini tu wakati mtumiaji hafanyi kazi kikamilifu kwenye mabadiliko hayo, kwani kila "hifadhi" hutugharimu safari ya hifadhidata.

Na niipendayo—baadhi ya watu walizoea Windows 95 na sasa hubonyeza mara mbili kila kitu 😁.

Huu ni utekelezaji rahisi wa kitendakazi cha debounce (CodePen hapa):

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

Inaweza kutumika kwenye kisanduku cha kuandiikia:

<input type="text" onkeyup="processChange()" />

Au kitufe:

<button onclick="processChange()">Click me</button>

Au tukio la window (window event)

window.addEventListener("scroll", processChange);

Na kwa vitu vingine kama vitendakazi rahisi vya JS.

Kwa hivyo ni nini kinaendelea hapa? Debounce ni kitendakazi maalum amacho kinashughulikia kazi mbili:

• Kutenga upeo wa variable ya kipima muda
• Kupanga kitendakazi chako kuanzishwa kwa wakati maalum

Hebu tueleze jinsi hii inavyofanya kazi katika matumizi ya kwanza katika uingizaji wa maandishi.

Wakati mtembeleaji anaandika herufi ya kwanza na kuachilia kitufe, debounce kwanza huweka upya kipima saa kwa kutumia clearTimeout(timer). Kwa wakati huu, hatua hii sio lazima kwani hakuna kitu kilichopangwa bado. Kisha hupanga kitendakazi kilichotolewa—saveInput()—ili kuitwa katika maada ya 300 ms.

Lakini tuseme kwamba mtembeleaji anaendelea kuandika, kwa hivyo kila kuachiliwa kwa kitufe kunaanzisha debounce tena. Kila wito unahitaji kuweka upya kipima muda, au, kwa maneno mengine, kughairi mipango ya awali kwa kutumia saveInput(), na kupangiliwa upya kwa muda mpya—300 ms baadae. Hii inaendelea mradi mtembeleaji anaendelea kubofya vitufe chini ya 300 ms.

Mpangilio wa mwisho hautafutwa, kwa hivyo saveInput() itaitwa hatimaye.

Njia nyingine—jinsi ya kupuuza matukio yanayofuata

Hiyo ni nzuri kwa kuhifadhi kiotomatiki au kuonyesha mapendekezo. Lakini vipi kuhusu matumizi ya mibofyo mingi ya kitufe kimoja? Hatutaki kusubiri mbofyo wa mwisho, lakini badala yake sajili ya kwanza na upuuze iliyobaki (CodePen hapa).

function debounce_leading(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

Hapa tunaanzisha kitendakazi saveInput() kwenye debounce_leading ya kwanza iliyosababishwa na kubofya kitufe mara ya kwanza. Tunapanga uharibifu wa kipima muda kwa 300 ms. Kila ubofyaji kitufe unaofwatwa ndani ya muda huo tayari kutakuwa na kipima muda kilichofafanuliwa na utasukuma uharibifu wa ms 300 katika wakati ujao.

Utekelezaji wa Debounce katika maktaba

Katika nakala hii, nilikuonyesha jinsi ya kutekeleza debounce katika JavaScript na kuitumia, kwa matukio yanayosababishwa na vipengele vya wovuti.

Walakini, hauitaji kutumia utekelezaji wako wa debounce katika miradi yako ikiwa hutaki. Maktaba za JS zinazotumiwa sana tayari zina utekelezaji wake. Hapa kuna mifano michache: