JavaScript-callbacks
"Ik bel later terug!"
Een callback is een functie die als argument wordt doorgegeven aan een andere functie
Met deze techniek kan een functie een andere functie aanroepen
Een callback-functie kan worden uitgevoerd nadat een andere functie is voltooid
Functievolgorde:
JavaScript-functies worden uitgevoerd in de volgorde waarin ze worden aangeroepen. Niet in de volgorde waarin ze zijn gedefinieerd.
In dit voorbeeld wordt uiteindelijk "Tot ziens" weergegeven:
Voorbeeld
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
In dit voorbeeld wordt uiteindelijk "Hallo" weergegeven:
Voorbeeld
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Volgorde controle
Soms zou je graag meer controle willen hebben over wanneer je een functie moet uitvoeren.
Stel dat u een berekening wilt maken en vervolgens het resultaat wilt weergeven.
U kunt een rekenmachinefunctie ( myCalculator) aanroepen, het resultaat opslaan en vervolgens een andere functie ( myDisplayer) oproepen om het resultaat weer te geven:
Voorbeeld
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Of u kunt een rekenmachinefunctie ( myCalculator) aanroepen en de rekenmachinefunctie de weergavefunctie laten aanroepen ( myDisplayer):
Voorbeeld
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Het probleem met het eerste voorbeeld hierboven is dat je twee functies moet aanroepen om het resultaat weer te geven.
Het probleem met het tweede voorbeeld is dat je niet kunt voorkomen dat de rekenmachinefunctie het resultaat weergeeft.
Nu is het tijd om terug te bellen.
JavaScript-callbacks
Een callback is een functie die als argument wordt doorgegeven aan een andere functie.
Met behulp van een callback kunt u de rekenmachinefunctie ( myCalculator) aanroepen met een callback, en de rekenmachinefunctie de callback laten uitvoeren nadat de berekening is voltooid:
Voorbeeld
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
In het bovenstaande voorbeeld myDisplayeris de naam van een functie.
Het wordt doorgegeven myCalculator()als argument.
Wanneer u een functie als argument doorgeeft, vergeet dan niet om haakjes te gebruiken.
Rechts: myCalculator (5, 5, myDisplayer);
Mis: mijnRekenmachine(5, 5, mijnDisplayer());
Wanneer gebruik je een terugbelverzoek?
Bovenstaande voorbeelden zijn niet erg spannend.
Ze zijn vereenvoudigd om u de callback-syntaxis te leren.
Waar callbacks echt schitteren zijn in asynchrone functies, waar de ene functie moet wachten op een andere functie (zoals wachten tot een bestand is geladen).
Asynchrone functies worden in het volgende hoofdstuk behandeld.