JavaScript Callback

"Jag kommer att anropa senare!"

Returåtgärd (callback) är en funktion som skickas som parameter till en annan funktion

Denna teknik tillåter en funktion att anropa en annan funktion

Returåtgärdsfunktioner kan köras efter att en annan funktion är klar

Funktionssekvens

JavaScript-funktioner körs i den ordning de anropas, inte i den ordning de definieras.

Detta exempel kommer slutligen att visa "Hej"：

exempel

function myFirst() {
  myDisplayer("Hej");
}
function mySecond() {
  myDisplayer("Hej");
}
myFirst();
mySecond();

Prova själv

Detta exempel kommer slutligen att visa "Hej"：

exempel

function myFirst() {
  myDisplayer("Hej");
}
function mySecond() {
  myDisplayer("Hej");
}
mySecond();
myFirst();

Prova själv

Kontroll av ordning

Ibland vill du ha bättre kontroll över när en funktion ska köras.

Anta att du vill göra en beräkning och sedan visa resultatet.

Du kan anropa beräkningssfunktionen (myCalculator) och spara resultatet, sedan anropa en annan funktion (myDisplayer) för att visa resultatet：

exempel

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);

Prova själv

eller, du kan anropa beräkningssfunktionen (myCalculator)，och låt beräkningssfunktionen anropa visningsfunktionen (myDisplayer)：

exempel

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

Prova själv

Problemet med den första exempel är att du måste anropa två funktioner för att visa resultatet.

Problemet med det andra exemplet är att du inte kan förhindra att beräkningssfunktionen visar resultatet.

Nu är det dags att införa en returåtgärd.

JavaScript Callback

En returåtgärd är en funktion som skickas som parameter till en annan funktion.

Genom att använda en returåtgärd kan du anropa beräkningssfunktionen genom att använda returåtgärden（myCalculator），och låt beräkningssfunktionen köra en returåtgärd efter att beräkningen är klar：

exempel

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

Prova själv

I exemplet ovan myDisplayer är namnet på funktionen.

det används som parameter till myCalculator().

När du skickar en funktion som parameter, kom ihåg att inte använda parenteser.

Rätt: myCalculator(5, 5, myDisplayer);

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

När använder man kallbackar?

Exemplet ovan är inte särskilt spännande.

De har förenklats för att förklara syntaxen för kallbackar.

Kallbackar skiner verkligen på asynkrona funktioner, där en funktion måste vänta på en annan funktion (t.ex. vänta på att en fil ska laddas).

Nästa kapitel kommer att presentera asynkrona funktioner.