Callback functies binnen Javascript

Geschreven door: op zaterdag 29 december 2018

Leestijd:

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

  • Waarom developers het zo leuk vinden bij ons

    Geschreven door: op woensdag 13 november 2019

    Bij ons op kantoor werkt een team van betrokken specialisten, waaronder 4 backend developers en 4 UX developers. Zij zorgen voor een belangrijk fundament binnen dit bedrijf. Een goede reden om te zorg ...

    Bekijk het artikel »
  • Beachvolleyballen voor het goede doel!

    Geschreven door: op vrijdag 25 oktober 2019

    Afgelopen vrijdag 11 oktober  hebben diverse betrokken specialisten uit ons team de handen ineen geslagen met een van onze opdrachtgevers. Samen met De Monchy International B.V. hebben we meegeda ...

    Bekijk het artikel »
  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten