Asynchroon uitvoeren van taken is een unieke eigenschap van JavaScript. We kunnen dit aanwenden om op een asynchrone manier data in te laden. Maar wat is dat precies ? Asynchroon? Het wil eigenlijk zeggen dat we het commando om bepaalde data op te halen uitsturen, en dat we er op reageren op het moment dat er antwoord komt. Eventuele rest van de code kan dus gewoon doorgaan. Dit is erg handig voor data die heel regelmatig moet worden geüpdate, zoals bijvoorbeeld het opvragen van het weer.

In het volgende voorbeeld vragen we op een asynchrone manier de lokale tijd van Tapei op. Dit doen we realtime aan de hand van de service hhttps://timezonedb.com.

In deze code gebeuren heel wat nieuwe dingen:
1. loadJSON zonder variabele

in setup() roepen we de loadJSON functie aan, maar deze keer slaan we de uitkomt niet meteen op in een variabele. Dit komt omdat we nu asynchroon tewerk gaan. Door enkel de functie aan te roepen, zetten we ze aan het werk. We weten niet wanneer we de data zullen krijgen.

2. getData

Maar achter de URL zien we dat er “getData” is verschenen. Dit wordt een callback functie genoemd. Deze functie wordt namelijk uitgevoerd op het moment dat loadJSON klaar is. Dat wil zeggen dat ze de hele tijd in de achtergrond werkt, en op het moment dat ze klaar is, op zoek gaat naar een functie die in dit geval “getData” heet.

3. function getData(data)

de functie getData kan je helemaal onderaan in de code terugvinden. Opmerkelijk hier is dat er een variabele “data” tussen de haken staat. de loadJSON functie pompt als het ware alle data die ze heeft teruggekregen in deze lokale variabele.

4. mijnData = data

Alhoewel we onze data nu hebben, zit deze “vast” in een lokale variabele “data”, die we aangemaakt hebben in de getData functie. Om de opgevraagde data ook buiten deze functie te kunnen gebruiken, moeten we deze overhevelen naar een globale variabele. In dit geval heb ik een globale variabele “mijnData” aangemaakt bovenaan in de code.

5. if(mijnData)

In de draw loop wil ik vervolgens mijn opgehaalde data laten zien. Echter kan dat alleen als de dabta ook daadwerkelijk is opgehaald. Aangezien ik niet precies weet wanneer de loadJSON functie klaar is, moet ik continu testen of er een waarde in de mijnData variabele zit. Want als deze namelijk niet meer leeg is, dan kan ik de data die erin zit laten zien.

Ik test dit door te vragen of mijnData nul is. In principe staat er

if(mijnData != 0){ ...}

dat kunnen we echter korter schrijven als

 if(mijnData)

Je kan dit lezen als “als er info in mijnData zit…”

Samenvatting:

Asynchroon inladen wordt gebruikt voor data die constant veranderd op een server. Bijvoorbeeld het weer of aandelen.
Omdat deze data steeds veranderd en ook door de gebruiker moet kunnen worden geüpdate.

 

meer info over asynchroon lade in P5js in deze video van Daniel Shiffman:

Data tonen >