Hvad er en tilbagekaldsfunktion i JavaScript?

Denne artikel giver en kort introduktion til konceptet og brugen af ​​tilbagekaldsfunktioner i JavaScript-programmeringssproget.

Funktioner er objekter

Den første ting, vi skal vide, er, at funktioner i Javascript er førsteklasses objekter. Som sådan kan vi arbejde med dem på samme måde, som vi arbejder med andre objekter, som at tildele dem til variabler og videregive dem som argumenter til andre funktioner. Dette er vigtigt, fordi det er sidstnævnte teknik, der giver os mulighed for at udvide funktionaliteten i vores applikationer.

Callback-funktioner

En tilbagekaldsfunktion er en funktion, der sendes som et argument til en anden funktion, der skal ”kaldes tilbage” på et senere tidspunkt. En funktion, der accepterer andre funktioner som argumenter, kaldes en højere ordensfunktion , som indeholder logikken til, hvornår tilbagekaldsfunktionen bliver udført. Det er kombinationen af ​​disse to, der giver os mulighed for at udvide vores funktionalitet.

Lad os starte med et simpelt eksempel for at illustrere tilbagekald:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

I ovenstående eksempel createQuoteer den højere ordens funktion, der accepterer to argumenter, hvor den anden er tilbagekaldelsen. Den logQuotefunktion bliver brugt til at passere i som vores callback funktion. Når vi udfører createQuotefunktionen (1) , skal du bemærke, at vi ikke tilføjer parenteser til, logQuotenår vi sender den ind som et argument. Dette skyldes, at vi ikke ønsker at udføre vores tilbagekaldsfunktion med det samme, vi vil blot videregive funktionsdefinitionen til den højere ordens funktion, så den kan udføres senere.

Vi er også nødt til at sikre, at hvis tilbagekaldsfunktionen, vi videregiver, forventer argumenter, at vi leverer disse argumenter, når vi udfører tilbagekaldet (2) . I ovenstående eksempel ville det være callback(myQuote);udsagnet, da vi ved, at det logQuoteforventes, at et tilbud skal sendes ind.

Derudover kan vi videregive anonyme funktioner som tilbagekald. Nedenstående kald til createQuoteville have det samme resultat som ovenstående eksempel:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

I øvrigt, behøver du ikke nødt til at bruge ordet ”tilbagekald” som navnet på dit argument, Javascript bare brug for at vide, at det er det rigtige argument navn. Baseret på ovenstående eksempel opfører nedenstående funktion sig nøjagtigt på samme måde.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Hvorfor bruge Callback-funktioner?

Det meste af tiden opretter vi programmer og applikationer, der fungerer synkront . Med andre ord startes nogle af vores operationer først, når de foregående er afsluttet. Ofte når vi anmoder om data fra andre kilder, såsom en ekstern API, ved vi ikke altid, hvornår vores data vil blive vist tilbage. I disse tilfælde vil vi vente på svaret, men vi ønsker ikke altid, at hele vores applikation skal stoppe, mens vores data hentes. Disse situationer er, hvor tilbagekaldsfunktioner er nyttige.

Lad os se på et eksempel, der simulerer en anmodning til en server:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

I ovenstående eksempel fremsætter vi en mock-anmodning til en server. Efter 5 sekunder er svaret ændret, og derefter bliver vores tilbagekaldsfunktion getResultsudført. For at se dette i aktion kan du kopiere / indsætte ovenstående kode i din browsers udviklerværktøj og udføre den.

Også, hvis du allerede er fortrolig med setTimeout, så har du brugt tilbagekaldsfunktioner hele tiden. Det anonyme funktionsargument, der er sendt til ovenstående eksempel, setTimeouter også et tilbagekald! Så eksempels originale tilbagekald udføres faktisk af en anden tilbagekaldelse. Vær omhyggelig med ikke at rede for mange tilbagekald, hvis du kan hjælpe det, da dette kan føre til noget kaldet "callback helvede"! Som navnet antyder, er det ikke en glæde at håndtere.