"Lopetan myöhemmin!"
Toimintoja, jotka toimivat rinnakkaisina muiden funktioiden kanssa kutsutaan asynkronisiksi
Hyvä esimerkki on JavaScript setTimeout()
Edellisessä luvussa käytetyt esimerkit olivat hyvin yksinkertaistettuja.
Esimerkkien tarkoituksena oli havainnollistaa takaisinsoittofunktioiden syntaksi:
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()
.
Kun käytät JavaScript-funktiota setTimeout()
, voit määrittää aikakatkaisun yhteydessä suoritettavan takaisinsoittotoiminnon:
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.
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:
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.
Kun käytät JavaScript-funktiota setInterval()
, voit määrittää kullekin aikavälille suoritettavan takaisinsoittotoiminnon:
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.
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.
Opit lupauksista tämän opetusohjelman seuraavassa luvussa.