"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
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“:
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
Tento příklad skončí zobrazením „Ahoj“:
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
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 poté zavolejte jinou funkci (myDisplayer), aby se zobrazil výsledek:
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);Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
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);
</script>
</body>
</html>
Nebo můžete zavolat funkci kalkulačky (myCalculator), a nechte funkci kalkulačky zavolat funkci zobrazení (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
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 zobrazení výsledku.
Nyní je čas provést zpětné volání.
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 (myCallback) a po dokončení výpočtu nechte funkci kalkulačky spustit zpětné volání:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
Ve výše uvedeném příkladu se myDisplayer nazývá funkce zpětného volání.
Je předán do myCalculator() jako argument.
Když předáváte funkci jako argument, pamatujte, že nepoužíváte závorky.
Vpravo: myCalculator(5, 5, myDisplayer);
Špatně: myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
Ve výše uvedeném příkladu je (x) => x >= 0 funkce zpětného volání.
Je předán do removeNeg() jako argument.
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í.
Tam, 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.