JavaScript Timing Events


Innehållsförteckning

    Visa innehållsförteckning


JavaScript kan köras i tidsintervall.

Detta kallas timinghändelser.

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

Timing av händelser

Objektet window tillåter exekvering av kod vid specificerade tidsintervall.

Dessa tidsintervall kallas timinghändelser.

De två nyckelmetoderna att använda med JavaScript är:

  • setTimeout(funktion, millisekunder)
    Utför en funktion efter att ha väntat ett angivet antal millisekunder.

  • setInterval(funktion, millisekunder)
    Samma som setTimeout(), men körningen upprepas av funktionen kontinuerligt.

setTimeout() och setInterval() är båda metoderna för HTML DOM Window-objektet.


Metoden setTimeout()

window.setTimeout(function, milliseconds);

Metoden window.setTimeout() kan skrivas utan fönsterprefixet.

Den första parametern är en funktion som ska exekveras.

Den andra parametern anger antalet millisekunder före exekvering.

Exempel

Klicka på en knapp. Vänta 3 sekunder, och sidan kommer att varna "Hej":

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

    <script>
function myFunction() {
  alert('Hello');
    }
</script>

Prova själv →

<!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>


Hur stoppar man avrättningen?

Metoden clearTimeout() stoppar exekveringen av funktionen specificeras i setTimeout().

window.clearTimeout(timeoutVariable)

Metoden window.clearTimeout() kan skrivas utan fönsterprefixet.

Metoden clearTimeout() använder variabeln returneras från setTimeout():

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Om funktionen inte redan har körts kan du stoppa exekveringen genom att anropa clearTimeout() metod:

Exempel

Samma exempel som ovan, men med en tillagd "Stopp"-knapp:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>

Prova själv →

<!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>

Metoden setInterval()

Metoden setInterval() upprepar en given funktion vid varje given tidsintervall.

window.setInterval(function, milliseconds);

Metoden window.setInterval() kan skrivas utan fönsterprefixet.

Den första parametern är funktionen som ska utföras.

Den andra parametern anger längden på tidsintervallet mellan varje avrättning.

Detta exempel kör en funktion som heter "myTimer" en gång i sekunden (som en digital Kolla på).

Exempel

Visa aktuell tid:

setInterval(myTimer, 1000);
 
function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Prova själv →

<!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>

Det går 1000 millisekunder på en sekund.


Hur stoppar man avrättningen?

Metoden clearInterval() stoppar exekveringen av funktionen specificeras i metoden setInterval().

window.clearInterval(timerVariable)

Metoden window.clearInterval() kan skrivas utan fönsterprefixet.

Metoden clearInterval() använder variabeln som returneras från setInterval():

let myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Exempel

Samma exempel som ovan, men vi har lagt till en "Stopptid"-knapp:

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

Prova själv →

<!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>

Fler exempel

En annan enkel timing

<!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>

En klocka skapad med en tidshändelse

<!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>