Hva er avkjørt i JavaScript?

Har du noen gang klikket på en knapp på en webside og føler at den tar litt for mye tid til å laste inn innhold. Tilsvarende, mens du skriver inn søkefeltet, tar søket en kort forsinkelse for å vise resultatene. Selv om du aldri følte det, la meg fortelle deg at utviklere brukte funksjonen Debounce For å oppnå denne forsinkelsen, og denne forsinkelsen er veldig nyttig når det gjelder å stoppe unødvendige forespørsler til serveren.

For eksempel, hvis du har satt en funksjon på vindusstørrelse og nå forestill deg å ringe funksjonen kontinuerlig mens vi endrer størrelse på vinduet vårt. Er det en effektiv måte å gjøre det på? Selvfølgelig ikke fordi det å kalle den spesifikke funksjonen kontinuerlig er unødvendig, og derfor vil den påvirke ytelsen.

I dette innlegget vil vi snakke om hva som avgir i JavaScript og implementeringen av det med noen eksempler.

Hva er avkjørt?

Den enkleste definisjonen av å avbytte vil være at det er en programmeringsteknikk som er ment å begrense kallet til en tidkrevende (flere beregninger) -funksjoner ofte eller bare utløse en funksjon når det er nødvendig. Anta at du er en utvikler og du oppretter en søkefelt. Du vil bare vise forslag når brukeren er ferdig med å skrive mening, ikke på hvert eneste tastetrykk. Derfor, ved å bruke debouncing i JavaScript, kan man forbedre websidenes ytelse.

Hvordan fungerer Debouncing? Vel, hvis jeg legger det i enkle ord, så fungerer de ved å sette opp en "vent" -timer før utførelsen av en spesifikk kodebit. Og hvis den samme prosessen på grunn av en eller annen situasjon blir utført. Deretter, i stedet for å danne en kø med to samme hendelser, stopper vi den gamle prosessen og fokuserer bare på utførelsen av den nylige. Dette sparer oss også fra en "flaskehals" -situasjon. For de som ikke er kjent med "flaskehalsen", er det en tilstand som oppstår når du prøver å skyve ut flere ting på skjermen enn behandlingskraften til serveren

Avkaste implementering

Vi kan implementere debounce i JavaScript ved å bruke trinnene gitt nedenfor:

• Lag en forsinkelsestimer inne i funksjonen og sett den til 0
• Tilbakestill tidtakeren hvis den spesifiserte funksjonen blir påkalt igjen
• Ring bare avkonkurransefunksjonen når timeout.

HTML -kodingsdel

Det første trinnet i implementering av debounce i JavaScript vil kreve et HTML -element som vi vil tilordne klikkhendelsen.

Først må du lage et knappelement i HTML:

Klikk på meg

Skriptkoden brukes til å referere til filen der vi skal skrive vår JavaScript -kode som er kode.JS. Vi har også brukt id Attributt som vi vil bruke til å referere til knappelementet til HTML i JavaScript.

Nå som vi er ferdige med HTML -kodingsdelen, la oss implementere Debounce -funksjonen i JavaScript.

JavaScript -kodingsdel

Funksjonen for implementering av debounce -teknikken vil gå slik:

// Få referanse til knappen
var mybtn = dokument.getElementById ("MyBtn");
// Debounce -funksjon definert
const debounce = (myfunc, forsinkelse) =>
La Debouncetimer;
returfunksjon ()
const context = dette;
const args = argumenter;
ClearTimeout (Debouncetimer);
Debouncetimer = setTimeout (() => myfunc.Bruk (kontekst, args), forsinkelse);


// Legg til en hendelseslytter til knappen
MyBtn.AddEventListener ('Klikk', Debounce (funksjon ()
// Varsel vil bli sett etter to sekunders time out
Varsel ("Hello World etter 2 sekunder");
, 2000));

I koden ovenfor får vi referansen til knappen som er spesifisert i HTML og legger til en klikkhendelse på denne knappen. Hvert knappeklikk vil påkalle debounce -funksjonen.

I Debounce Funksjon, vi tar to argumenter, den første er funksjonen og den andre er forsinkelsestiden eller tidsavbruddet. Så initialiserte vi Debouncetimer som vil spore forsinkelsesperioden.

Når en bruker klikker på knappen en gang, vil avbestillingsfunksjonen bli kalt etter forsinkelsen.

Så hvis brukeren klikker på knappen og deretter klikker på knappen før forsinkelsen, tilbakestilles tidtakeren, og den første forsinkelsen blir fjernet.

All denne funksjonaliteten oppnås ved funksjonen ClearTimeout ().

La oss se utgangen:

Vi kan se at når vi klikker på knappen, ser vi gjentatte ganger ingen utdata. Men da vi klikket på knappen forrige gang og la den igjen, så vi varslingsmeldingen etter to sekunder. Derfor kan vi konkludere med det Hvert klikk kaller avbestillingsfunksjonen og tilbakestiller tidtakeren som forsinker samtalen.

Konklusjon

Debouncing er en programmeringsteknikk som brukes av utviklere for å begrense antall anrop til en hendelse eller bare utløse en funksjon når det er nødvendig eller for bare en brukssak. Debouncing-teknikken brukes i en tidkrevende funksjon som har mange beregninger, så vi unngår unødvendig kall av den funksjonen. For å være spesifikk, kan debouncing brukes i søkefelt, suggererende tekstfelt, innholdslasting av websider e.G Facebook, Instagram, og så videre.

I dette innlegget diskuterte vi hva debouncing er i JavaScript og så på dets arbeid og implementering i JavaScript.