JavaScript Callbacks

"Jeg vil kalde tilbage senere!"

Tilbagekaldelsesfunktion (callback) er en funktion, der passes som parameter til en anden funktion

Denne teknik tillader en funktion at kalde en anden funktion

Tilbagekaldelsesfunktioner kan køre efter at en anden funktion er færdig

Funktionsserie

JavaScript-funktioner udføres i den rækkefølge, de bliver kaldt, ikke i den rækkefølge, de bliver defineret.

Dette eksempel viser endelig "God farvel":

eksempel

function minFørste() {
  minDisplayer("Hej");
}
function minAnden() {
  minDisplayer("God farvel");
}
minFørste();
minAnden();

Prøv det selv

Dette eksempel viser endelig "Hej":

eksempel

function minFørste() {
  minDisplayer("Hej");
}
function minAnden() {
  minDisplayer("God farvel");
}
minAnden();
minFørste();

Prøv det selv

Sekvenskontrol

Nogle gange ønsker du at kontrollere bedre, hvornår en funktion skal udføres.

Antag, at du skal udføre en beregning og derefter vise resultatet.

Du kan kalde beregningsfunktionen (minBeregner) og gem resultaterne, derefter kald en anden funktion (myDisplayer) for at vise resultatet：

eksempel

function minDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function minBeregner(num1, num2) {
  let sum = num1 + num2;
  return sum;
}
lad result = minBeregner(5, 5);
minDisplayer(result);

Prøv det selv

eller, du kan kalde beregningsfunktionen (minBeregner)，og lad beregningsfunktionen kalde visningsfunktionen (myDisplayer)：

eksempel

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

Prøv det selv

Problemet med den første eksempel er, at du skal kalde to funktioner for at vise resultatet.

Problemet med det andet eksempel er, at du ikke kan forhindre beregningsfunktionen i at vise resultatet.

Det er tid til at introducere tilbagekaldelsesfunktioner.

JavaScript Callbacks

En tilbagekaldelsesfunktion er en funktion, der passes som parameter til en anden funktion。

Med tilbagekaldelsesfunktion kan du kalde beregningsfunktionen gennem en tilbagekaldelsesfunktion（minBeregner），og efter at beregningen er færdig, skal beregningsfunktionen køre en tilbagekaldelsesfunktion：

eksempel

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

Prøv det selv

I det ovenstående eksempel: myDisplayer er funktionens navn.

det som parameter overføres til myCalculator().

Når du sender en funktion som parameter, skal du huske at ikke bruge parenteser.

Korrekt: myCalculator(5, 5, myDisplayer);

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

Når skal man bruge callback?

Eksemplet ovenfor er ikke særligt spændende.

De er forenklet for at forklare syntaxen for dig.

Callback virkelig blomstrer med asynkrone funktioner, hvor en funktion skal vente på en anden funktion (f.eks. at vente på filindlæsning).

Det næste kapitel vil præsentere asynkrone funktioner.