\(\renewcommand{\vec}[1]{\mathbf{#1}} \DeclareMathOperator*{\sijoitus}{\Big/} \newcommand{\eval}[2]{\sijoitus_{\kern-0.7em#1}^{\kern0.7em#2}\!} \)

5.3.10 Tehtävien ajastus 2 setInterval

JavaScriptissä toinen tapa hidastaa tapahtumien kulkua on käyttää setInterval("tehtävä", odotusaika millisekunteina)-metodia. Tässä on se hyvä puoli, ettei rekursiota tarvita, vaan toisto jatkuu loputtomiin.

Alla esimerkki laskurista, joka tulostaa luvut näytölle 0,2 sekuntin välein:

KoodiKoodin tulos
<script type="text/javascript"> var luku = 0; // ajastin-muuttujan avulla toisto saadaan loppumaan. var ajastin = 0; function starttaa(){ ajastin = setInterval("kasvata_lukua()",200); } function kasvata_lukua(){ luku = luku+1; document.getElementById("laskuri").innerHTML = luku; } // Tämä pysäyttää laskurin: function pysayta_laskuri(){ clearInterval(ajastin); } </script>

Tämän lisäksi yllä tarvitaan laskuri-elementti ja painikkeet "Käynnistä laskuri" ja "Pysäytä laskuri":

<button type="button" onclick="starttaa()">Käynnistä laskuri</button> <button type="button" onclick="pysayta_laskuri()">Pysäytä laskuri</button> <div id = "laskuri" style="font-size: 5cm"></div>