JavaScript-ajoitustapahtumat


Sisällysluettelo

    Näytä sisällysluettelo


JavaScript voidaan suorittaa aikavälein.

Tätä kutsutaan ajoitustapahtumiksi.

1
2
3
4
5
6
7
8
9
10
11
12

Ajoitus Tapahtumat

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ä.


SetTimeout() -menetelmä

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.

Esimerkki

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>


Kuinka lopettaa teloitus?

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ä:

Esimerkki

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>

SetInterval() -menetelmä

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).

Esimerkki

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.


Kuinka lopettaa teloitus?

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);

Esimerkki

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>

Lisää esimerkkejä

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>