Asynkroninen JavaScript

"I will finish later!"

Toisten toimintojen kanssa rinnakkain suoritettavat funktiot kutsutaan asynkroonisiksi (asynchronous)

Hyvä esimerkki on JavaScript setTimeout()

Asynkroninen JavaScript

Edellisessä luvussa käytetyt esimerkit on yksinkertaistettu merkittävästi.

Tarkoituksena on näyttää paluutoiminnon syntaksi:

Esimerkki

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

kokeile itse

Yllä olevassa esimerkissämyDisplayer On funktion nimi.

Se välitetään parametrina: myCalculator();。

Todellisessa maailmassa paluutoimintoja käytetään usein yhdessä asynkronisten funktioiden kanssa.

Yksi tyypillinen esimerkki on JavaScript setTimeout();。

Odota aikakatkaisua

Kun käytät JavaScript-funktioita setTimeout(); Voit määrittää paluutoiminnon, joka suoritetaan aikakatkaisun jälkeen:

Esimerkki

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

kokeile itse

Yllä olevassa esimerkissämyFunction Käytetään paluutoiminnoksi.

funktion (funktionsnimike) toimittaminen parametrina setTimeout();。

3000 on milisekuntien välinen ajanjakso ennen aikakatkaisua, joten 3 sekunnin kuluttua kutsutaan myFunction()。

Kun välität funktion parametrina, muista olla käyttämättä sulkeita.

Oikein: setTimeout(myFunction, 3000);

Virhe: setTimeout(myFunction(), 3000);

Jos et välitä funktiota nimellä parametrina toiselle funktiolle, voit aina välittää koko funktion:

Esimerkki

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

kokeile itse

Yllä olevassa esimerkissäfunction(){ myFunction("I love You !!!"); } paluutoiminto. Se on täysin toimiva funktio. Täysin toimiva funktio annetaan parametrina setTimeout().

3000 on milisekuntien välinen ajanjakso ennen aikakatkaisua, joten 3 sekunnin kuluttua kutsutaan myFunction()。

Odota ajanjaksoa：

Kun käytät JavaScript-funktioita setInterval() voimassa, voit määrittää paluutoiminnon joka suoritetaan jokaisella ajanjaksolla：

Esimerkki

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

kokeile itse

Yllä olevassa esimerkissämyFunction paluutoiminnoksi.

funktion (funktionsnimike) toimittaminen parametrina setInterval()。

1000 on milisekuntien välinen ajanjakso, joten myFunction() Kutsutaan sekunnissa kerran.

Odota tiedoston lataamista

Jos luot funktioita, jotka lataavat ulkoisia resursseja (kuten skriptejä tai tiedostoja), et voi käyttää näitä sisältöjä ennen kuin ne on täysin ladattu.

Tämä on paras hetki käyttää paluutoimintoja.

Tässä esimerkissä ladataan HTML-tiedosto (mycar.html）, ja näytä HTML-tiedosto verkkosivulla, kun se on täysin ladattu：

Odota tiedoston lataamista：

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("Virhe: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

kokeile itse

Yllä olevassa esimerkissämyDisplayer paluutoiminnoksi.

funktion (funktionsnimike) toimittaminen parametrina getFile()。

Seuraavaksi: mycar.html kopioksi:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Auto on pyörillä varustettu, itsellään voitelty moottoriväline, jota käytetään liikenteessä.</p>
<p>Useimmat termiä koskevat määritelmät määrittelevät, että autot on suunniteltu ajamaan pääasiassa teillä, niillä on yhdestä kahdeksaan istumapaikkaa ja ne yleensä ovat nelipyöräisiä.</p>
<p>(Wikipedia)</p>