Asynchrone JavaScript
"Ik zal later eindigen!"
Functies die parallel lopen met andere functies worden asynchroon genoemd
Een goed voorbeeld is JavaScript setTimeout()
Asynchrone JavaScript
De voorbeelden die in het vorige hoofdstuk werden gebruikt, waren erg vereenvoudigd.
Het doel van de voorbeelden was om de syntaxis van callback-functies te demonstreren:
Voorbeeld
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
In het bovenstaande voorbeeld myDisplayer
is de naam van een functie.
Het wordt doorgegeven myCalculator()
als argument.
In de echte wereld worden callbacks het vaakst gebruikt met asynchrone functies.
Een typisch voorbeeld is JavaScript setTimeout()
.
Wachten op een time-out
Wanneer u de JavaScript-functie gebruikt setTimeout()
, kunt u een callback-functie specificeren die bij time-out moet worden uitgevoerd:
Voorbeeld
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
In het bovenstaande voorbeeld myFunction
wordt gebruikt als een callback.
myFunction
wordt doorgegeven setTimeout()
als argument.
3000 is het aantal milliseconden vóór de time-out, dus
myFunction()
wordt na 3 seconden gebeld.
Wanneer u een functie als argument doorgeeft, vergeet dan niet om haakjes te gebruiken.
Rechts: setTimeout(myFunction, 3000);
Mis: setTimeout(mijnFunctie(), 3000);
In plaats van de naam van een functie als argument door te geven aan een andere functie, kun je in plaats daarvan altijd een hele functie doorgeven:
Voorbeeld
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
In het bovenstaande voorbeeld function(){ myFunction("I love You !!!"); }
wordt gebruikt als een callback. Het is een volledige functie. De volledige functie wordt als argument doorgegeven aan setTimeout().
3000 is het aantal milliseconden vóór de time-out, dus
myFunction()
wordt na 3 seconden gebeld.
Wachten op intervallen:
Wanneer u de JavaScript-functie gebruikt setInterval()
, kunt u een callback-functie specificeren die voor elk interval moet worden uitgevoerd:
Voorbeeld
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
In het bovenstaande voorbeeld myFunction
wordt gebruikt als een callback.
myFunction
wordt doorgegeven setInterval()
als argument.
1000 is het aantal milliseconden tussen intervallen, dus
myFunction()
wordt elke seconde genoemd.
Wachten op bestanden
Als u een functie maakt om een externe bron te laden (zoals een script of een bestand), kunt u de inhoud niet gebruiken voordat deze volledig is geladen.
Dit is het perfecte moment om terug te bellen.
Dit voorbeeld laadt een HTML-bestand ( mycar.html
), en geeft het HTML-bestand weer op een webpagina, nadat het bestand volledig is geladen:
Wachten op een bestand:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
In het bovenstaande voorbeeld myDisplayer
wordt gebruikt als een callback.
myDisplayer
wordt doorgegeven getFile()
als argument.
Hieronder een kopie van mycar.html
:
mijnauto.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>