Išaiškinti paaiškinimą - kaip priversti „JavaScript“ palaukti, kol vartotojas baigs rašyti

„JavaScript“ atmetimo funkcijos yra aukštesnės eilės funkcijos, ribojančios kitos funkcijos iškvietimo greitį.

Aukštesnės eilės funkcija yra funkcija, kuri arba priima funkciją kaip argumentą, arba grąžina funkciją kaip grąžinimo sakinio dalį. Mūsų atšaukimo funkcija atlieka abu veiksmus.

Dažniausias atmetimo atvejis yra perduoti jį kaip argumentą įvykių klausytojui, prijungtam prie HTML elemento. Norėdami geriau suprasti, kaip tai atrodo ir kodėl tai naudinga, pažiūrėkime į pavyzdį.

Tarkime, kad turite funkciją pavadinimu, myFunckuri bus iškviečiama kiekvieną kartą, kai ką nors įvesite įvesties lauke. Peržiūrėję savo projekto reikalavimus nusprendžiate, kad norite pakeisti patirtį.

Vietoj to, norite myFuncvykdyti, kai praėjo bent 2 sekundės nuo paskutinio karto, kai ką nors įvedėte.

Čia gali pasirodyti atšaukimas. Užuot myFuncperdavę įvykių klausytojui, jūs perduodate peradresavimą. Tada pats debasas būtų myFuncargumentas kartu su skaičiumi 2000.

Dabar, kai spustelėsite mygtuką, jis myFuncbus vykdomas tik tuo atveju, jei iki paskutinio skambučio praėjo bent 2 sekundės myFunc.

Kaip įgyvendinti atšaukimo funkciją

Nuo pradžios iki pabaigos, norint įgyvendinti atšaukimo funkciją, reikia tik 7 kodo eilutės. Likusi šio skyriaus dalis skirta toms 7 kodo eilutėms, kad galėtume pamatyti, kaip mūsų atšaukimo funkcija veikia viduje.

function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }

Pradėdami nuo 1 eilutės, mes paskelbėme naują funkciją pavadinimu debounce. Ši nauja funkcija turi du parametrus callbackir delay.

function debounce( callback, delay ) { } 

callback yra bet kuri funkcija, kuriai reikia apriboti jos vykdymo kartų skaičių.

delayyra laikas (milisekundėmis), kuris turi praeiti, kad callbackgalėtų vėl įvykdyti.

function debounce( callback, delay ) { let timeout; }

2 eilutėje skelbiame neinicijuotą kintamąjį, pavadintą timeout.

Šis naujas kintamasis palaiko timeoutIDgrąžintą, kai paskambinsime setTimeoutvėliau į savo debouncefunkciją.

function debounce( callback, delay ) { let timeout; return function() { } }

3 eilutėje grąžiname anoniminę funkciją. Ši anoniminė funkcija bus uždaryta per timeoutkintamąjį, kad galėtume išsaugoti prieigą prie jo net ir baigus vykdyti pradinį skambutį debounce.

„JavaScript“ uždarymas įvyksta, kai vidinė funkcija išlaiko prieigą prie savo išorinės funkcijos leksinės srities, nors išorinė funkcija baigta vykdyti. Jei norite sužinoti daugiau apie uždarymus, galite perskaityti Kyle Simpson 7 skyrių „Jūs nežinote JS“
function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); } }

4 eilutėje mes vadiname mixin clearTimeoutmetodą WindowOrWorkerGlobalScope. Tai užtikrins, kad kiekvieną kartą, kai iškviečiame savo debouncefunkciją, timeoutbus iš naujo nustatyta ir skaitiklis gali vėl pradėti veikti.

WindowOrWorkerGlobalScopeJavaScript Mixin suteikia mums prieigą prie kelių gerai žinomų metodų, kaip setTimeout, clearTimeout, setInterval, clearInterval, ir fetch.

Daugiau apie tai galite sužinoti perskaitę šį straipsnį.

function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }

5 eilutėje mes pasiekėme savo debouncefunkcijų įgyvendinimo pabaigą .

Ta kodo eilutė atlieka keletą dalykų. Pirmasis veiksmas yra vertės priskyrimas timeoutkintamajam, kurį deklaravome 2 eilutėje. Vertė yra tai, timeoutIDkuri grąžinama, kai skambiname setTimeout. Tai leis mums nurodyti skambučio metu sukurtą skirtąjį laiką setTimeout, kad galėtume jį iš naujo nustatyti kiekvieną kartą, kai debouncenaudojama mūsų funkcija.

Antrasis atliktas veiksmas yra skambinimas setTimeout. Tai sukurs skirtąjį laiką, kuris bus įvykdytas callback(funkcijai perduotas funkcijos argumentas debounce), kai pasibaigs delay(mūsų debouncefunkcijai perduotas argumentas skaičius ).

Kadangi mes naudojame skirtąjį laiką, jis callbackbus vykdomas tik tuo atveju, jei leisime skirtam laikui pasiekti 0. Tai reiškia, kad mūsų debouncefunkcijos esmė yra svarbiausia, nes mes kiekvieną kartą nustatome skirtąjį laiką debounce. Tai leidžia mums apriboti myFunc.

5 ir 6 eilutėse yra tik skliaustai, todėl jų neperžengsime.

Viskas. Taip mūsų debouncefunkcija veikia viduje. Dabar pridėkime prie savo ankstesnio pavyzdžio nuo pat pradžių. Sukursime įvesties lauką ir pridėsime įvykių klausytoją su savo debouncefunkcija kaip vieną iš jo argumentų.

Tikro pasaulio pavyzdys

Pirmiausia turime sukurti įvesties lauką.

Type something in! 

Toliau turime sukurti funkciją, kurią norime vykdyti, kai tik įvesime ką nors į savo įvesties lauką.

function helloWorld() { console.log("Hello World!") }

Galiausiai turime pasirinkti aukščiau sukurtą įvesties lauką ir prie jo pridėti keyupįvykių klausytoją.

const myInput = document.getElementById("myInput"); myInput.addEventListener( "keyup", debounce( helloWorld, 2000 ) );

Tai užbaigia mūsų realaus pasaulio pavyzdį! Kiekvieną kartą, kai ką nors įvesime į savo įvesties lauką, helloWorldbus vykdoma, jei nuo paskutinio karto, kai ką nors įvedėme, praėjo bent 2 sekundės.

Ypatingas ačiū „Reddit“ vartotojo stratoskopui , padėjusiam pataisyti kai kuriuos pradinius šio straipsnio kodus. Čia yra veikiantis demonstracinis debouncevariantas, kurį jis sukūrė apie šią funkciją „Repl.it“.

Pabaigos užrašai

Atšaukimo funkcijos yra paprastos, tačiau galingos funkcijos, kurios gali pastebimai paveikti daugumą „JavaScript“ programų.

Nors mūsų pavyzdys buvo įdomus ir paprastas, daugelis didelių organizacijų naudoja atšaukimo funkcijas, kad padidintų savo programų našumą.

Jei norite sužinoti daugiau apie „JavaScript“, apsilankykite mano svetainėje! Dirbu prie kai kurių įdomių dalykų //juanmvega.com.