Wywołania zwrotne JavaScript
"Oddzwonię później!"
Callback to funkcja przekazana jako argument do innej funkcji
Ta technika pozwala funkcji na wywołanie innej funkcji
Funkcja wywołania zwrotnego może zostać uruchomiona po zakończeniu innej funkcji
Sekwencja funkcji
Funkcje JavaScript są wykonywane w kolejności ich wywołania. Nie w kolejności, w jakiej są zdefiniowane.
W tym przykładzie zostanie wyświetlony komunikat „Do widzenia”:
Przykład
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
W tym przykładzie wyświetli się „Hello”:
Przykład
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Kontrola sekwencji
Czasami chciałbyś mieć lepszą kontrolę nad tym, kiedy wykonać funkcję.
Załóżmy, że chcesz wykonać obliczenia, a następnie wyświetlić wynik.
Możesz wywołać funkcję kalkulatora ( myCalculator), zapisać wynik, a następnie wywołać 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);
Możesz też wywołać funkcję kalkulatora ( myCalculator) i pozwolić funkcji kalkulatora wywoł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);
Problem z pierwszym przykładem powyżej polega na tym, że musisz wywołać dwie funkcje, aby wyświetlić wynik.
Problem z drugim przykładem polega na tym, że nie można zapobiec wyświetlaniu wyniku przez funkcję kalkulatora.
Teraz nadszedł czas na oddzwonienie.
Wywołania zwrotne JavaScript
Callback to funkcja przekazana jako argument do innej funkcji.
Używając wywołania zwrotnego, możesz wywołać funkcję kalkulatora ( myCalculator) z wywołaniem zwrotnym, a funkcja kalkulatora uruchomi wywołanie zwrotne po zakończeniu obliczeń:
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);
W powyższym przykładzie myDisplayerto nazwa funkcji.
Jest przekazywany myCalculator()jako argument.
Kiedy przekazujesz funkcję jako argument, pamiętaj, aby nie używać nawiasów.
Po prawej: myCalculator(5, 5, myDisplayer);
Zło:mójKalkulator(5, 5, mójWyświetlacz());
Kiedy korzystać z oddzwaniania?
Powyższe przykłady nie są zbyt ekscytujące.
Są uproszczone, aby nauczyć Cię składni wywołania zwrotnego.
Wywołania zwrotne naprawdę błyszczą w funkcjach asynchronicznych, gdzie jedna funkcja musi czekać na inną funkcję (jak oczekiwanie na załadowanie pliku).
Funkcje asynchroniczne zostały omówione w następnym rozdziale.