Zpětná volání JavaScriptu
"Zavolám později!"
Zpětné volání je funkce předaná jako argument jiné funkci
Tato technika umožňuje funkci volat jinou funkci
Funkce zpětného volání se může spustit po dokončení jiné funkce
Funkční sekvence
Funkce JavaScriptu se provádějí v pořadí, v jakém jsou volány. Ne v pořadí, v jakém jsou definovány.
Tento příklad skončí zobrazením „Sbohem“:
Příklad
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Tento příklad skončí zobrazením „Ahoj“:
Příklad
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Sekvenční řízení
Někdy byste chtěli mít lepší kontrolu nad tím, kdy funkci provést.
Předpokládejme, že chcete provést výpočet a poté zobrazit výsledek.
Můžete zavolat funkci kalkulačky ( myCalculator), uložit výsledek a pak zavolat jinou funkci ( myDisplayer) pro zobrazení výsledku:
Příklad
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);
Nebo můžete zavolat funkci kalkulačky ( myCalculator) a nechat funkci kalkulačky zavolat funkci zobrazení ( myDisplayer):
Příklad
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Problém s prvním příkladem výše je, že k zobrazení výsledku musíte zavolat dvě funkce.
Problém s druhým příkladem je, že nemůžete zabránit funkci kalkulačky v zobrazení výsledku.
Nyní je čas provést zpětné volání.
Zpětná volání JavaScriptu
Zpětné volání je funkce předaná jako argument jiné funkci.
Pomocí zpětného volání můžete zavolat funkci kalkulačky ( myCalculator) se zpětným voláním a nechat funkci kalkulačky spustit zpětné volání po dokončení výpočtu:
Příklad
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Ve výše uvedeném příkladu myDisplayerje název funkce.
Předává se myCalculator()jako argument.
Když předáte funkci jako argument, nezapomeňte použít závorky.
Vpravo: myCalculator(5, 5, myDisplayer);
Špatně: myCalculator(5, 5, myDisplayer());
Kdy použít zpětné volání?
Výše uvedené příklady nejsou příliš vzrušující.
Jsou zjednodušené, aby vás naučily syntaxi zpětného volání.
Kde zpětná volání skutečně září, jsou asynchronní funkce, kde jedna funkce musí čekat na jinou funkci (jako je čekání na načtení souboru).
Asynchronní funkce jsou popsány v další kapitole.