Callback functies binnen Javascript header image

Callback functies binnen Javascript

zaterdag 29 december 2018 ·Leestijd: 3 minuten
contacteer auteur:

Functies zijn zeer krachtige tools binnen Javascript. Het zijn zogenaamde first-class objecten, net zoals een string, int, en array. Hierdoor hebben functies meerdere mogelijkheden. Zo kunnen functies worden opgeslagen als variabelen, kunnen functies als parameters aan andere functies worden doorgegeven, etc. Een callback functie maakt gebruik van de laatste mogelijkheid.

Een callback functie is een functie die je meegeeft als parameter aan een andere functie die in die functie wordt uitgevoerd. Een voorbeeld:

Javascript callback blog.png

 In bovenstaand voorbeeld is doneShopping de callbackfunctie. Bij het aanroepen van goShopping geven we de callback functie mee, doneShopping. De functie doneShopping wordt uitgevoerd binnen goShopping. Let wel, hier is de callback functie verplicht. Wanneer je de functie goShopping aanroept zonder een callback functie op te geven, zal er een fout optreden. Om de callback functie optioneel te maken, doe je het volgende:

Javascript callback functions optioneel.png

Hiermee bouw je ook gelijk een check in of de callback wel een functie is en niet bijvoorbeeld een string of een array.

Bovenstaande functies maken gebruik van ‘named functions’, functies met een naam die je opnieuw kan aanroepen. Je kunt voor een callback functie ook gebruik maken van aan anonieme functie:

Javascript callback functions.png

Deze functie heeft geen naam en kun je dus ook niet opnieuw aanroepen.

Het is ook mogelijk om meerdere callback functies aan te roepen. Hieronder voorbeeld met een jQuery Ajax call:

Javascript callback function.png

Bovenstaand voorbeeld is een synchrone functie, dat wil zeggen dat de code opeenvolgend wordt uitgevoerd. Bij sommige functies weet je niet hoe lang het duurt voordat de functie klaar is, een asynchrone functie.

Asynchrone callback

Een voorbeeld van een asynchrone functionaliteit is bijvoorbeeld aan een Ajax call of een websocket connectie om data op te halen vanaf de server. Je kunt hier gebruik maken van een asynchrone callback, zie het voorbeeld hieronder.

 

Javascript callback functions async.png

Hier geef je aan het request een extra parameter mee, de callback functie. Deze functie wordt niet direct uitgevoerd met de andere code, maar wordt opgeslagen en pas later uitgevoerd. De callback functie wordt in een wachtrij gezet, genaamd de ‘event loop’ en wordt pas uitgevoerd als er een result terug is van het request.

Callback Hell

Zoals ook al eerder besproken, kun je meerdere callbacks aanroepen binnen een functie. Stel, je wilt het resultaat van een request gebruiken om een ander request te doen.

Javascript callback callback hel.png

Zoals je ziet wordt de code een stuk minder leesbaar als je op deze manier gebruik maakt van callback functies. Dit wordt dan ook wel ‘callback hell’ genoemd. Wat je kunt doen om dit tegen te gaan en de code leesbaar te houden is goed op de naamgeving letten. Probeer een zo duidelijk mogelijke naam te geven aan de functies en variabelen. Ook kun je code van elkaar scheiden, dus een javascript file aanmaken met daarin je callback functies.


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º