JavaScript Ajastus
JavScript'i abil on võimalik käivitada mingi sündmus mitte kohe vaid teatud aja pärast.
Näited:
Lihtne ajastus - 1
Lihtne ajastus - 2
Lõputu tsükli ajastus
Lõputu tsükli ajastus koos Stopp nupuga
Kell
JavaScript'i abil on lihtene ajastada sündmusi. Selleks kasutatakse kahte moodust:
- setTimeout() - käivitab koodi millalgi tulevikus
- clearTimeout() - nullib setTimeout()
setTimeout()
Kirjaviis
var t=setTimeout("javascript statement",milliseconds);
setTimeout() meetod muutub väärtuseks. Ülal olevas näites väärtus hoitakse muutujas nimega t.
setTimeout() on string mis sisaldab JavaScript lausungit. Selleks võib olla näiteks "alert('3sekundit!')" või siis "alertMsg()".
Sekundi parameeter määrab mitme millisekundi pärast soovitakse, et esimene parameeter käivituks.
Pane tähele: Ühes sekundis on 1000 millisekundit.
Näide
Allpool olevas näites pärast nupule vajutust, ilmub 3. sekundi pärast teateaken.
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('3 sekundit!')",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Kuva 'hoiatusaken'!"
onClick="timedMsg()">
</form>
</body>
</html>
Lõputu tsükli ajastuse näide
Selleks, et luua lõputu tsükliga ajaloendurit, peab kirjutama funktsiooni mis käivitub iseenesest. Allpool olevas näites, pärast nupule vajutust käivitub sisestusväljal loendur mis töötab igavesti:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Alusta loendust!"
onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
clearTimeout()
Kirjaviis
clearTimeout(setTimeout_variable
Näide
See näide on sarnane "lõputu tsükli" näitega ülalpool. Ainus vahe on selles, et siia näitesse on lisatud "Peata Loendus!" nupp:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Alusta Loendust!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Peata Loendus!"
onClick="stopCount()">
</form>
</body>
</html>
