JavaScript voidaan suorittaa aikavälein.
Tätä kutsutaan ajoitustapahtumiksi.
1
2
3
4
5
6
7
8
9
10
11
12
|
ikkuna
-objekti mahdollistaa koodin suorittamisen tietyin aikavälein.
Näitä aikavälejä kutsutaan ajoitustapahtumiksi.
Kaksi tärkeintä JavaScriptin kanssa käytettävää menetelmää ovat:
setTimeout(funktio, millisekuntia
)
Suorittaa toiminnon odotettuaan tietyn määrän millisekunteja.
setInterval(funktio, millisekuntia
)
Sama kuin setTimeout(), mutta toistaa suorituksen toiminnosta jatkuvasti.
setTimeout()
ja setInterval()
ovat molemmat HTML DOM -ikkunaobjektin menetelmiä.
window.setTimeout(function, milliseconds);
Metodi window.setTimeout()
voidaan kirjoittaa ilman ikkunan etuliitettä.
Ensimmäinen parametri on suoritettava funktio.
Toinen parametri ilmaisee millisekuntien määrän ennen suoritusta.
Napsauta painiketta. Odota 3 sekuntia, niin sivu ilmoittaa "Hei":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Timing</h2>
<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>
<button onclick="setTimeout(myFunction, 3000);">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
</body>
</html>
Metodi clearTimeout()
pysäyttää funktion suorittamisen määritetty kohdassa setTimeout().
window.clearTimeout(timeoutVariable)
Metodi window.clearTimeout()
voidaan kirjoittaa ilman ikkunan etuliitettä.
Metodi clearTimeout()
käyttää muuttujaa palautettu kohteesta setTimeout()
:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Jos toimintoa ei ole vielä suoritettu, voit lopettaa sen suorittamisen kutsumalla clearTimeout()
menetelmä:
Sama esimerkki kuin yllä, mutta lisättynä "Stop"-painike:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Timing</h2>
<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
<script>
function myFunction() {
alert("Hello");
}
</script>
</body>
</html>
Metodi setInterval()
toistaa tietyn funktion jokaisella annetulla aikaväli.
window.setInterval(function, milliseconds);
Metodi window.setInterval()
voidaan kirjoittaa ilman ikkunan etuliitettä.
Ensimmäinen parametri on suoritettava toiminto.
Toinen parametri ilmaisee kunkin välillä olevan aikavälin pituuden teloitus.
Tämä esimerkki suorittaa toiminnon nimeltä "myTimer" kerran sekunnissa (kuten digitaalinen katsella).
Näytä nykyinen aika:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Timing</h2>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>
Yhdessä sekunnissa on 1000 millisekuntia.
Metodi clearInterval()
pysäyttää funktion suorittamisen määritetty setInterval()-metodissa.
window.clearInterval(timerVariable)
Metodi window.clearInterval()
voidaan kirjoittaa ilman ikkunan etuliitettä.
Metodi clearInterval()
käyttää muuttujaa, joka palautetaan muuttujasta setInterval()
:
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Sama esimerkki kuin yllä, mutta olemme lisänneet "Pysäytysaika" -painikkeen:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Timing</h2>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer ,1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>
Toinen yksinkertainen ajoitus
<!DOCTYPE html>
<html>
<body>
<h2>JavaSript setTimeout()</h2>
<p id="demo">I will display when two, four, and six seconds have passed.</p>
<script>
setTimeout(myTimeout1, 2000)
setTimeout(myTimeout2, 4000)
setTimeout(myTimeout3, 6000)
function myTimeout1() {
document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
document.getElementById("demo").innerHTML = "6 seconds";
}
</script>
</body>
</html>
Kello, joka on luotu ajastustapahtumalla
<!DOCTYPE html>
<html>
<body onload="startTime()">
<h2>JavaScript Clock</h2>
<div id="txt"></div>
<script>
function startTime() {
const today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>