JavaScript Callbacks

"Ik zal later terugbellen!"

Een callback (callback) is een functie die als parameter wordt doorgegeven aan een andere functie

Deze techniek maakt het mogelijk voor een functie om een andere functie aan te roepen

Callback functies kunnen worden uitgevoerd nadat een andere functie is voltooid

Volgorde van functies

JavaScript functies worden uitgevoerd in de volgorde waarin ze worden aangeroepen, niet in de volgorde waarin ze zijn gedefinieerd.

Deze voorbeeld zal uiteindelijk "Goodbye" weergeven:

voorbeeld

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

Probeer het zelf

Deze voorbeeld zal uiteindelijk "Hello" weergeven:

voorbeeld

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

Probeer het zelf

Volgorde van uitvoering

Soms wilt u beter beheersen wanneer een functie wordt uitgevoerd.

Stel dat u een berekening wilt uitvoeren en het resultaat wilt weergeven.

U kunt de calculator functie aanroepen (myCalculator) en sla het resultaat op, roep vervolgens een andere functie aan (myDisplayer) 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);

Probeer het zelf

Of u kunt de calculator functie aanroepen (myCalculator) en laat de calculator functie de display functie aanroepen (myDisplayer) :

voorbeeld

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
myCalculator(5, 5);

Probeer het zelf

Het probleem met het eerste voorbeeld is dat u twee functies moet aanroepen om het resultaat te weergeven.

Het probleem met het tweede voorbeeld is dat u de calculator functie niet kunt verhinderen om het resultaat te weergeven.

Het is tijd om callbacks te introduceren.

JavaScript Callbacks

Een callback is een functie die als parameter wordt doorgegeven aan een andere functie.

Met een callback kunt u de calculator functie oproepen via de callback:myCalculatoren laat de calculator functie uitvoeren na het berekenen:

voorbeeld

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Probeer het zelf

In het voorbeeld hierboven myDisplayer is de naam van de functie.

wordt doorgegeven als parameter myCalculator().

Onthoud wanneer je een functie als parameter doorgeeft, om geen haakjes te gebruiken.

Juist: myCalculator(5, 5, myDisplayer);

Fout: myCalculator(5, 5, myDisplayer());

Wanneer gebruik je callbacks?

Het voorbeeld hierboven is niet erg spannend.

Ze zijn vereenvoudigd om u de syntaxis van callbacks te leren.

De ware glorie van callbacks is de asynchrone functie, waarbij een functie moet wachten op een andere functie (bijvoorbeeld wachten op het laden van een bestand).

Het volgende hoofdstuk zal asynchrone functies introduceren.