"Dokončím později!"
Funkce běžící paralelně s jinými funkcemi se nazývají asynchronní
Dobrým příkladem je JavaScript setTimeout()
Příklady použité v předchozí kapitole byly velmi zjednodušené.
Účelem příkladů bylo demonstrovat syntaxi funkcí zpětného volání:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
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 je myDisplayer název funkce.
Je předán do myCalculator() jako argument.
V reálném světě se zpětná volání nejčastěji používají s asynchronními funkcemi.
Typickým příkladem je JavaScript setTimeout().
Při použití funkce JavaScript setTimeout(), můžete zadat funkci zpětného volání, která se má provést při vypršení časového limitu:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
Ve výše uvedeném příkladu se jako zpětné volání používá myFunction.
myFunction je předán do setTimeout() jako argument.
3000 je počet milisekund před vypršením časového limitu, takže myFunction() bude volána po 3 sekundách.
Když předáváte funkci jako argument, pamatujte, že nepoužíváte závorky.
Vpravo: setTimeout(myFunction, 3000);
Špatně: setTimeout(myFunction(), 3000);
Místo předání názvu funkce jako argumentu jiné funkci, místo toho můžete vždy předat celou funkci:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>
Ve výše uvedeném příkladu function(){ myFunction("Miluji tě!!!"); } se používá jako zpětné volání. Je to kompletní funkce. Úplná funkce je předána funkci setTimeout() jako argument.
3000 je počet milisekund před vypršením časového limitu, takže myFunction() bude volána po 3 sekundách.
Při použití funkce JavaScript setInterval(), můžete zadat funkci zpětného volání, která se má provést pro každý interval:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Using setInterval() to display the time every second (1000 milliseconds).</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
</html>
Ve výše uvedeném příkladu se jako zpětné volání používá myFunction.
myFunction je předán do setInterval() jako argument.
1000 je počet milisekund mezi intervaly, takže myFunction() bude volána každou sekundu.
Pomocí asynchronního programování mohou JavaScriptové programy spouštět dlouhotrvající úlohy, a paralelně spouštět další úkoly.
Ale asynchronní programy se obtížně zapisují a obtížně se ladí.
Z tohoto důvodu většina moderních asynchronních metod JavaScriptu nepoužívá zpětná volání. Místo toho se v JavaScriptu asynchronní programování řeší pomocí Promises.
O slibech se dozvíte v další kapitole tohoto tutoriálu.