Wywołania zwrotne w JavaScript

"I will call back later!"

Wywoływanie zwrotne (callback) jest funkcją przekazywaną jako parametr do innej funkcji

Ta technika pozwala funkcji wywołać inną funkcję

Funkcje wywołania zwrotnego mogą być uruchamiane po zakończeniu innej funkcji

Sekwencja funkcji

Funkcje JavaScript są wykonywane w kolejności, w której są wywoływane, a nie w kolejności, w której są zdefiniowane.

Ten przykład ostatecznie wyświetli "Goodbye":

przykład

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

Spróbuj sam

Ten przykład ostatecznie wyświetli "Hello":

przykład

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

Spróbuj sam

Kontrola顺序

Czasami chcesz lepiej kontrolować, kiedy wykonywać funkcję.

Załóżmy, że chcesz wykonać obliczenie i wyświetlić wynik.

Możesz wywołać funkcję kalkulatora (myCalculator) zapisz wynik, a następnie wywołaj inną funkcję (myDisplayer) aby wyświetlić wynik：

przykład

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

Spróbuj sam

Albo możesz wywołać funkcję kalkulatora (myCalculator) i pozwól, aby funkcja kalkulatora wywołała funkcję wyświetlania (myDisplayer)：

przykład

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

Spróbuj sam

Problem pierwszego przykładu polega na tym, że musisz wywołać dwie funkcje, aby wyświetlić wynik.

Problem drugiego przykładu polega na tym, że nie możesz zapobiec temu, aby funkcja kalkulatora wyświetliła wynik.

Czas na wprowadzenie wywoływania zwrotnego.

Wywołania zwrotne w JavaScript

Wywoływanie zwrotne jest funkcją przekazywaną jako parametr do innej funkcji.

Używając wywoływania zwrotnego, możesz wywołać funkcję kalkulatora za pomocą wywoływania zwrotnego (myCalculatori po zakończeniu obliczeń uruchom funkcję wywoływania zwrotnego:

przykład

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

Spróbuj sam

W powyższym przykładzie: myDisplayer jest nazwą funkcji.

jest przekazywana jako parametr myCalculator().

Pamiętaj, że gdy przekazujesz funkcję jako parametr, nie używaj nawiasów.

Poprawnie: myCalculator(5, 5, myDisplayer);

Błąd: myCalculator(5, 5, myDisplayer());

Kiedy używać callbacków?

Powyższy przykład nie jest zbyt ekscytujący.

Zostały one uproszczone, aby wyjaśnić składnię callbacków.

Największą siłą callbacków są asynchroniczne funkcje, w których jedna funkcja musi czekać na drugą funkcję (np. czekanie na załadowanie pliku).

Następny rozdział przedstawi asynchroniczne funkcje.