Asynchronní JavaScript
"Skončím později!"
Funkce běžící paralelně s jinými funkcemi se nazývají asynchronní
Dobrým příkladem je JavaScript setTimeout()
Asynchronní JavaScript
Příklady použité v předchozí kapitole byly velmi zjednodušené.
Účelem příkladů bylo demonstrovat syntaxi funkcí zpětného volání:
Příklad
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Ve výše uvedeném příkladu myDisplayer
je název funkce.
Předává se 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()
.
Čekání na časový limit
Při použití funkce JavaScript setTimeout()
můžete určit funkci zpětného volání, která se má provést při vypršení časového limitu:
Příklad
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Ve výše uvedeném příkladu myFunction
se používá jako zpětné volání.
myFunction
je předán setTimeout()
jako argument.
3000 je počet milisekund před vypršením časového limitu, takže
myFunction()
bude voláno po 3 sekundách.
Když předáte funkci jako argument, nezapomeňte použít závorky.
Vpravo: setTimeout(myFunction, 3000);
Špatně:setTimeout(myFunction(), 3000);
Místo předání názvu funkce jako argumentu jiné funkci můžete vždy předat celou funkci:
Příklad
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Ve výše uvedeném příkladu function(){ myFunction("I love You !!!"); }
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áno po 3 sekundách.
Intervaly čekání:
Při použití funkce JavaScript setInterval()
můžete určit funkci zpětného volání, která se má provést pro každý interval:
Příklad
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Ve výše uvedeném příkladu myFunction
se používá jako zpětné volání.
myFunction
je předán setInterval()
jako argument.
1000 je počet milisekund mezi intervaly, takže
myFunction()
se bude volat každou sekundu.
Čekání na soubory
Pokud vytvoříte funkci pro načtení externího zdroje (jako je skript nebo soubor), nemůžete obsah používat, dokud nebude plně načten.
Toto je ideální čas pro použití zpětného volání.
Tento příklad načte soubor HTML ( mycar.html
) a zobrazí soubor HTML na webové stránce po úplném načtení souboru:
Čekání na soubor:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Ve výše uvedeném příkladu myDisplayer
se používá jako zpětné volání.
myDisplayer
je předán getFile()
jako argument.
Níže je kopie mycar.html
:
mycar.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>