JavaScript tilbakekallingsfunksjoner - Hva er tilbakeringing i JS og hvordan du bruker dem

Hvis du er kjent med programmering, vet du allerede hva funksjoner gjør og hvordan du bruker dem. Men hva er en tilbakeringingsfunksjon? Tilbakeringingsfunksjoner er en viktig del av JavaScript, og når du forstår hvordan tilbakeringing fungerer, blir du mye bedre i JavaScript.

Så i dette innlegget vil jeg hjelpe deg med å forstå hva tilbakeringingsfunksjoner er og hvordan du bruker dem i JavaScript ved å gå gjennom noen eksempler.

Hva er en tilbakeringingsfunksjon?

I JavaScript er funksjoner objekter. Kan vi overføre objekter til funksjoner som parametere? Ja.

Så vi kan også overføre funksjoner som parametere til andre funksjoner og kalle dem inne i de ytre funksjonene. Høres komplisert ut? La meg vise det i et eksempel nedenfor:

function print(callback) { callback(); }

Print () -funksjonen tar en annen funksjon som parameter og kaller den inn. Dette er gyldig i JavaScript, og vi kaller det en "tilbakeringing". Så en funksjon som overføres til en annen funksjon som parameter, er en tilbakeringingsfunksjon. Men det er ikke alt.

Du kan også se videoversjonen av tilbakeringingsfunksjoner nedenfor:

Hvorfor trenger vi tilbakeringingsfunksjoner?

JavaScript kjører koden i rekkefølge ovenfra og ned. Imidlertid er det noen tilfeller at kode kjøres (eller må kjøres) etter at noe annet skjer og heller ikke sekvensielt. Dette kalles asynkron programmering.

Tilbakekoblinger sørger for at en funksjon ikke skal kjøres før en oppgave er fullført, men vil kjøre rett etter at oppgaven er fullført. Det hjelper oss med å utvikle asynkron JavaScript-kode og beskytter oss mot problemer og feil.

I JavaScript er måten å lage en tilbakeringingsfunksjon på å overføre den som en parameter til en annen funksjon, og deretter ringe den tilbake rett etter at noe har skjedd eller en eller annen oppgave er fullført. La oss se hvordan ...

Hvordan lage en tilbakeringing

For å forstå hva jeg har forklart ovenfor, la meg starte med et enkelt eksempel. Vi vil logge en melding til konsollen, men den skal være der etter 3 sekunder.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

Det er en innebygd metode i JavaScript kalt “setTimeout”, som kaller en funksjon eller evaluerer et uttrykk etter en gitt tidsperiode (i millisekunder). Så her kalles "meldings" -funksjonen etter at det har gått 3 sekunder. (1 sekund = 1000 millisekunder)

Med andre ord blir meldingsfunksjonen kalt etter at noe skjedde (etter 3 sekunder for dette eksemplet), men ikke før. Så meldingsfunksjonen er et eksempel på en tilbakeringingsfunksjon.

Hva er en anonym funksjon?

Alternativt kan vi definere en funksjon direkte i en annen funksjon, i stedet for å kalle den. Det vil se slik ut:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Som vi kan se, har tilbakeringingsfunksjonen her ikke noe navn, og en funksjonsdefinisjon uten navn i JavaScript kalles som en "anonym funksjon". Dette gjør nøyaktig samme oppgave som eksemplet ovenfor.

Tilbakeringing som en pilfunksjon

Hvis du foretrekker det, kan du også skrive den samme tilbakeringingsfunksjonen som en ES6-pilfunksjon, som er en nyere type funksjon i JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Hva med arrangementer?

JavaScript er et hendelsesdrevet programmeringsspråk. Vi bruker også tilbakeringingsfunksjoner for hendelseserklæringer. La oss for eksempel si at vi vil at brukerne skal klikke på en knapp:

Click here

Denne gangen vil vi bare se en melding på konsollen når brukeren klikker på knappen:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Så her velger vi knappen først med sin id, og deretter legger vi til en hendelseslytter med addEventListener-metoden. Det tar to parametere. Den første er typen, "klikk", og den andre parameteren er en tilbakeringingsfunksjon, som logger meldingen når du klikker på knappen.

Som du kan se, brukes tilbakeringingsfunksjoner også til hendelseserklæringer i JavaScript.

Pakk opp

Tilbakekallinger brukes ofte i JavaScript, og jeg håper dette innlegget hjelper deg å forstå hva de faktisk gjør og hvordan du kan jobbe med dem lettere. Deretter kan du lære om JavaScript Promises, som er et lignende emne som jeg har forklart i mitt nye innlegg.

Hvis du vil lære mer om webutvikling, følg meg gjerne på Youtube !

Takk for at du leser!