Som JavaScript -utvikler kan du bruke mesteparten av tiden din på å utvikle synkrone applikasjoner og programmer. Noen spesifikke operasjoner kan bare starte når de tidligere er ferdige i denne typen applikasjoner. Når data blir bedt om fra en ekstern kilde som et eksternt API, har vi imidlertid ofte ingen anelse om når de nødvendige dataene vil bli returnert.

I slike tilfeller må du vente på responsen, men samtidig vil du ikke at søknaden din skal være i stoppet tilstand mens dataene henter. Legge til Tilbakeringingsfunksjoner er nyttige i denne situasjonen.

Denne oppskrivningen vil forklare tilbakeringingsfunksjoner i jQuery ved hjelp av passende eksempler. Så la oss starte!

Tilbakeringingsfunksjoner i jQuery

Uttalelsene som er lagt til i et JavaScript -program, utføres sekvensielt. Men når du bruker en effekt i jQuery, tar det tid å utføre sin funksjonalitet; I mellomtiden vil koden lagt til i neste linjer kjøres. For å unngå denne situasjonen tilbyr jQuery en tilbakeringingsfunksjon for hver jQuery -effektmetode.

En tilbakeringingsfunksjon er en type jQuery -funksjon som utføres når den ekstra effekter -metoden er ferdig med driften. Denne funksjonen sendes som et siste argument i den spesifikke jQuery -effektmetoden.

Se nå på syntaksen til tilbakeringingsfunksjonen i jQuery.

Syntaks av jQuery tilbakeringingsfunksjoner

$ (velger).effekt_funksjon (hastighet, tilbakeringing);

I “velger“Du kan legge til en jQuery -velger for å velge de nødvendige HTML -elementene, og“effekt_function ()”Er en jQuery -effektmetode der du må gi et argument for“hastighet”Og“Ring tilbake”Funksjon.

Eksempel 1: Bruke tilbakeringingsfunksjoner i jQuery

Først av alt vil vi legge til en "Skjul avsnitt”-Knappen og et avsnitt i vår“indeks.html”Fil:

Skjul avsnitt

Dette er et avsnitt med prøvetekst.

I neste trinn vil vi bevege oss mot vår JavaScript -fil "mitt prosjekt.JS”Og skriv følgende kode i den:

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("P").skjul ("sakte", funksjon ()
varsel ("Avsnittet er nå skjult");
);
);
);

Nå, når brukeren klikker på “Skjul avsnitt”-Knappen, JQuery Element Name Selector”$ (“P”)”Vil finne og få“p”Eller avsnittelementet og gjem det sakte gjemmer deg sakte fra websiden. Etter å ha gjort det, tilbakeringingen “funksjon()”Vil bli utført, og den viser en varslingsboks i nettleseren:

Her er en GIF som demonstrerer utdataene fra vårt JavaScript -program:

I tilfelle vil du sjekke hvordan det samme programmet vil fungere uten en jQuery tilbakeringingsfunksjon, og legg deretter til den undergitte koden i JavaScript-filen din:

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("P").skjul (1000);
varsel ("Avsnittet er nå skjult");
);
);

Uten å legge til en tilbakeringingsfunksjon, vil JavaScript -tolken fungere som følger:

Eksempel 2: Bruke tilbakeringingsfunksjoner i jQuery

I dette eksemplet vil vi legge til en tilbakeringingsfunksjon for “Slidetoggle”JQuery Effect. Før det vil vi legge til et avsnitt og en "Klikk på meg”Knapp:

Dette er et eksempel på paragraf.

Klikk på meg

Etter det vil vi skrive ut følgende kode i vår “mitt prosjekt.JS”Fil:

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("P").Slidetoggle ("sakte", funksjon ()
Varsel ("Slide veksleffekten er nå fullført.");
);
);
);

Den ovennevnte koden spesifiserer at å klikke på knappen sakte skyve ned "p”Element. Når dette “Slidetoggle ()”Effekt finish, tilbakeringingsfunksjonen vil bli utført, og en varslingsboks vises på websiden som sier at“Slide Toggle Effect er nå fullført”:

Sjekk ut utdataene fra det medfølgende programmet:

Nå, i samme "indeks.html”Fil, vi vil legge til en overskrift med“

" stikkord:

Dette er på vei

Deretter elementnavnvelgeren $ (“H1, P”) I JavaScript -filen vil og få H1 og p elementer. Deretter vil avsnittet gli ned med "langsom”Hastighet og overskrift vil bli vist i sin posisjon. Til slutt vil tilbakeringingsfunksjonen vise varslingsboksen i nettleseren:

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("H1, P").Slidetoggle ("sakte", funksjon ()
Varsel ("Slide Toggle Effect er fullført.");
);
);
);

Nå vises varslingsboksen to ganger på websiden, en for "H1”Overskrift og den andre for“p”Paragrafelement:

Som du kan se fra den ovennevnte utgangen har vi implementert tilbakeringingsfunksjon i jQuery.

Konklusjon

Tilbaketrekksfunksjonen i jQuery er en funksjon som utføres når den ekstra effektmetoden er ferdig med utførelsen. I en jQuery -effektmetode blir tilbakeringingsfunksjonen gitt til å bli kalt tilbake senere og er vanligvis spesifisert som det siste argumentet. Denne oppskrivningen forklarte tilbakeringingsfunksjoner i jQuery, og vi har også gitt passende eksempler relatert til bruk av tilbakeringingsfunksjoner.