Asynchroniczny JavaScript

"I will finish later!"

Funkcje działające równolegle z innymi funkcjami są nazywane asynchronicznymi (asynchronicznymi)

Dobrym przykładem jest JavaScript setTimeout()

Asynchroniczny JavaScript

Przykład użyty w poprzednim rozdziale został znacznie uproszczony.

Celem tego przykładu jest demonstracja składni zwolniczek:

Przykład

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

spróbuj sam

W powyższym przykładzie,myDisplayer jest nazwą funkcji.

jest przekazywany jako parametr do myCalculator();。

W rzeczywistym świecie, zwolniczki są najczęściej używane z asynchronicznymi funkcjami.

Jednym z typowych przykładów jest JavaScript setTimeout();。

Czekanie na timeout

Podczas użycia funkcji JavaScript setTimeout(); Możesz指定超时时执行的回调函数：

Przykład

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

spróbuj sam

W powyższym przykładzie,myFunction jest używany jako zwolniczka.

funkcja (nazwa funkcji) jest przekazywana jako parametr do setTimeout();。

3000 to liczba milisekund przed timeoutem, więc 3 sekundy później zostanie wywołana myFunction()。

Pamiętaj, że gdy przekazujesz funkcję jako parametr, nie używaj nawiasów.

Poprawnie: setTimeout(myFunction, 3000);

Błąd: setTimeout(myFunction(), 3000);

Jeśli nie przekazujesz nazwy funkcji jako parametru do innej funkcji, zawsze możesz przekazać całą funkcję:

Przykład

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

spróbuj sam

W powyższym przykładzie,function(){ myFunction("I love You !!!"); } jako zwrotne wywołanie. Jest to pełna funkcja. Pełna funkcja jest przekazywana jako parametr do setTimeout().

3000 to liczba milisekund przed timeoutem, więc 3 sekundy później zostanie wywołana myFunction()。

Czekaj na interval:

Podczas użycia funkcji JavaScript setInterval() można指定每个间隔执行的回调函数：

Przykład

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML =
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

spróbuj sam

W powyższym przykładzie,myFunction jako zwrotka.

funkcja (nazwa funkcji) jest przekazywana jako parametr do setInterval()。

1000 to liczba milisekund między intervalami, więc myFunction() wywoływana co sekundę.

Czekaj na plik

Jeśli tworzysz funkcje do ładowania zewnętrznych zasobów (np. skryptów lub plików), to te zasoby nie będą dostępne przed pełnym załadowaniem.

To jest najlepszy moment na użycie zwrotnych wywołań.

W tym przykładzie ładuje się plik HTML (mycar.htmli wyświetl ten plik HTML na stronie po jego pełnym załadowaniu:

Czekaj 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);
    }
      myCallback("Błąd: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

spróbuj sam

W powyższym przykładzie,myDisplayer jako zwrotka.

funkcja (nazwa funkcji) jest przekazywana jako parametr do getFile()。

Poniżej znajduje się mycar.html kopia:

mycar.html

<img src="img_car.jpg" alt="Dobry samochód" style="szerokość:100%">
<p>Samochód to kołowe, samozasilane pojazdy mechaniczne używane do transportu.</p>
<p>Większość definicji tego terminu wskazuje, że samochody są projektowane do głównego użytku na drogach, mają miejsce dla jednej do ośmiu osób, zazwyczaj mają cztery koła.</p>
<p>(Wikipedia)</p>