Asynkroninen JavaScript


Sisällysluettelo

    Näytä sisällysluettelo

"Lopetan myöhemmin!"

Toimintoja, jotka toimivat rinnakkaisina muiden funktioiden kanssa kutsutaan asynkronisiksi

Hyvä esimerkki on JavaScript setTimeout()

Asynkroninen JavaScript

Edellisessä luvussa käytetyt esimerkit olivat hyvin yksinkertaistettuja.

Esimerkkien tarkoituksena oli havainnollistaa takaisinsoittofunktioiden syntaksi:

Esimerkki

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

Kokeile itse →

<!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>

Yllä olevassa esimerkissä myDisplayer on funktion nimi.

Se välitetään argumenttina parametrille myCalculator().

Todellisessa maailmassa takaisinsoittoja käytetään useimmiten asynkronisten toimintojen kanssa.

Tyypillinen esimerkki on JavaScript setTimeout().


Odotetaan aikakatkaisua

Kun käytät JavaScript-funktiota setTimeout(), voit määrittää aikakatkaisun yhteydessä suoritettavan takaisinsoittotoiminnon:

Esimerkki

setTimeout(myFunction, 3000);

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

Kokeile itse →

<!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>

Yllä olevassa esimerkissä myFunction-toimintoa käytetään takaisinsoittona.

myFunction välitetään argumenttina parametrille setTimeout().

3000 on millisekuntien määrä ennen aikakatkaisua, joten myFunction() kutsutaan 3 sekunnin kuluttua.

Huomautus

Kun annat funktion argumenttina, muista olla käyttämättä sulkeita.

Oikea: setTimeout(myFunction, 3000);

Väärin: setTimeout(myFunction(), 3000);

Sen sijaan, että välität funktion nimen argumenttina toiselle funktiolle, voit aina siirtää sen sijaan koko funktion:

Esimerkki

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Kokeile itse →

<!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>

Yllä olevassa esimerkissä function(){ myFunction("I love You !!!"); } käytetään takaisinsoittona. Se on täydellinen toiminto. Täydellinen funktio välitetään argumenttina parametrille setTimeout().

3000 on millisekuntien määrä ennen aikakatkaisua, joten myFunction() kutsutaan 3 sekunnin kuluttua.



Väliajoja odotellessa:

Kun käytät JavaScript-funktiota setInterval(), voit määrittää kullekin aikavälille suoritettavan takaisinsoittotoiminnon:

Esimerkki

setInterval(myFunction, 1000);

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

Kokeile itse →

<!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>

Yllä olevassa esimerkissä myFunction-toimintoa käytetään takaisinsoittona.

myFunction välitetään argumenttina parametrille setInterval().

1000 on millisekuntien määrä välien välillä, joten myFunction() kutsutaan joka sekunti.


Takaisinsoittovaihtoehdot

Asynkronisen ohjelmoinnin avulla JavaScript-ohjelmat voivat aloittaa pitkäkestoisia tehtäviä, ja jatka muiden tehtävien suorittamista rinnakkain.

Mutta asynkronisia ohjelmia on vaikea kirjoittaa ja vaikea korjata.

Tämän vuoksi useimmat nykyaikaiset asynkroniset JavaScript-menetelmät eivät käytä takaisinkutsuja. Sen sijaan JavaScriptissä asynkroninen ohjelmointi ratkaistaan käyttämällä Promises-ohjelmaa.

Huomautus

Opit lupauksista tämän opetusohjelman seuraavassa luvussa.