Asynchroniczny JavaScript
"Skończę później!"
Funkcje działające równolegle z innymi funkcjami są nazywane asynchronicznymi
Dobrym przykładem jest JavaScript setTimeout()
Asynchroniczny JavaScript
Przykłady użyte w poprzednim rozdziale były bardzo uproszczone.
Celem przykładów było zademonstrowanie składni funkcji zwrotnych:
Przykład
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
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.
W prawdziwym świecie wywołania zwrotne są najczęściej używane z funkcjami asynchronicznymi.
Typowym przykładem jest JavaScript setTimeout().
Czekam na limit czasu
Używając funkcji JavaScript setTimeout(), możesz określić funkcję zwrotną, która ma być wykonywana po przekroczeniu limitu czasu:
Przykład
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
W powyższym przykładzie myFunctionjest używany jako callback.
myFunctionjest przekazywany setTimeout()jako argument.
3000 to liczba milisekund przed przekroczeniem limitu czasu, więc
myFunction()zostanie wywołana po 3 sekundach.
Kiedy przekazujesz funkcję jako argument, pamiętaj, aby nie używać nawiasów.
Po prawej: setTimeout(myFunction, 3000);
Zło: setTimeout(mojaFunkcja(), 3000);
Zamiast przekazywać nazwę funkcji jako argument do innej funkcji, zawsze możesz zamiast tego przekazać całą funkcję:
Przykład
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
W powyższym przykładzie function(){ myFunction("I love You !!!"); }
jest używany jako callback. To kompletna funkcja. Kompletna funkcja jest przekazywana do setTimeout() jako argument.
3000 to liczba milisekund przed przekroczeniem limitu czasu, więc
myFunction()zostanie wywołana po 3 sekundach.
Oczekiwanie na interwały:
Używając funkcji JavaScript setInterval(), możesz określić funkcję zwrotną, która ma być wykonywana dla każdego interwału:
Przykład
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
W powyższym przykładzie myFunctionjest używany jako callback.
myFunctionjest przekazywany setInterval()jako argument.
1000 to liczba milisekund między interwałami, więc
myFunction()będzie wywoływana co sekundę.
Czekam na pliki
Jeśli utworzysz funkcję do ładowania zasobu zewnętrznego (takiego jak skrypt lub plik), nie możesz użyć treści przed jej pełnym załadowaniem.
To idealny czas na skorzystanie z oddzwaniania.
Ten przykład ładuje plik HTML ( mycar.html) i wyświetla plik HTML na stronie internetowej po pełnym załadowaniu pliku:
Oczekiwanie na plik:
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);
W powyższym przykładzie myDisplayerjest używany jako callback.
myDisplayerjest przekazywany getFile()jako argument.
Poniżej znajduje się kopia mycar.html:
mojsamochód.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>