JavaScript Callback-funktioner - Hvad er tilbagekald i JS og hvordan man bruger dem

Hvis du er fortrolig med programmering, ved du allerede, hvad funktioner gør, og hvordan du bruger dem. Men hvad er en tilbagekaldsfunktion? Callback-funktioner er en vigtig del af JavaScript, og når du først har forstået, hvordan callbacks fungerer, bliver du meget bedre i JavaScript.

Så i dette indlæg vil jeg gerne hjælpe dig med at forstå, hvad tilbagekaldsfunktioner er, og hvordan du bruger dem i JavaScript ved at gennemgå nogle eksempler.

Hvad er en tilbagekaldsfunktion?

I JavaScript er funktioner objekter. Kan vi videregive objekter til funktioner som parametre? Ja.

Så vi kan også videregive funktioner som parametre til andre funktioner og kalde dem inde i de ydre funktioner. Lyder kompliceret? Lad mig vise det i et eksempel nedenfor:

function print(callback) { callback(); }

Funktionen print () tager en anden funktion som parameter og kalder den ind. Dette er gyldigt i JavaScript, og vi kalder det en "tilbagekaldelse". Så en funktion, der sendes til en anden funktion som parameter, er en tilbagekaldsfunktion. Men det er ikke alt.

Du kan også se videoversionen af ​​tilbagekaldsfunktioner nedenfor:

Hvorfor har vi brug for Callback-funktioner?

JavaScript kører kode sekventielt i top-down rækkefølge. Der er dog nogle tilfælde, hvor koden kører (eller skal køre), efter at der sker noget andet og heller ikke sekventielt. Dette kaldes asynkron programmering.

Callbacks sørger for, at en funktion ikke kører, før en opgave er afsluttet, men vil køre lige efter, at opgaven er afsluttet. Det hjælper os med at udvikle asynkron JavaScript-kode og holder os beskyttet mod problemer og fejl.

I JavaScript er måden at oprette en tilbagekaldsfunktion at sende den som en parameter til en anden funktion og derefter kalde den tilbage lige efter, at der er sket noget, eller en eller anden opgave er afsluttet. Lad os se hvordan ...

Sådan oprettes en tilbagekaldelse

For at forstå hvad jeg har forklaret ovenfor, lad mig starte med et simpelt eksempel. Vi vil logge en besked til konsollen, men den skal være der efter 3 sekunder.

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

Der er en indbygget metode i JavaScript kaldet “setTimeout”, som kalder en funktion eller evaluerer et udtryk efter en given tidsperiode (i millisekunder). Så her kaldes "meddelelses" -funktionen, efter 3 sekunder er gået. (1 sekund = 1000 millisekunder)

Med andre ord kaldes beskedfunktionen efter noget skete (efter 3 sekunder gået for dette eksempel), men ikke før. Så meddelelsesfunktionen er et eksempel på en tilbagekaldsfunktion.

Hvad er en anonym funktion?

Alternativt kan vi definere en funktion direkte inde i en anden funktion i stedet for at kalde den. Det vil se sådan ud:

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

Som vi kan se, har tilbagekaldsfunktionen her intet navn, og en funktionsdefinition uden navn i JavaScript kaldes en "anonym funktion". Dette gør nøjagtigt den samme opgave som eksemplet ovenfor.

Tilbagekaldelse som en pilefunktion

Hvis du foretrækker det, kan du også skrive den samme tilbagekaldsfunktion som en ES6-pilefunktion, som er en nyere funktionstype i JavaScript:

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

Hvad med begivenheder?

JavaScript er et hændelsesdrevet programmeringssprog. Vi bruger også tilbagekaldsfunktioner til hændelseserklæringer. Lad os for eksempel sige, at vi ønsker, at brugerne skal klikke på en knap:

Click here

Denne gang vil vi kun se en besked på konsollen, når brugeren klikker på knappen:

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

Så her vælger vi knappen først med dens id, og derefter tilføjer vi en begivenhedslytter med addEventListener-metoden. Det tager to parametre. Den første er dens type, "klik", og den anden parameter er en tilbagekaldsfunktion, som logger meddelelsen, når der klikkes på knappen.

Som du kan se, bruges tilbagekaldsfunktioner også til hændelseserklæringer i JavaScript.

Pak ind

Callbacks bruges ofte i JavaScript, og jeg håber, at dette indlæg hjælper dig med at forstå, hvad de rent faktisk gør, og hvordan du kan arbejde med dem lettere. Dernæst kan du lære om JavaScript-løfter, som er et lignende emne, som jeg har forklaret i mit nye indlæg.

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!