JavaScript Timing Events

Indholdsfortegnelse

Vis indholdsfortegnelse

JavaScript kan udføres i tidsintervaller.

Dette kaldes timing begivenheder.

Timing af begivenheder

window-objektet tillader udførelse af kode med specificerede tidsintervaller.

Disse tidsintervaller kaldes timinghændelser.

De to vigtigste metoder til brug med JavaScript er:

setTimeout(funktion, millisekunder)
Udfører en funktion efter at have ventet et angivet antal millisekunder.
setInterval(funktion, millisekunder)
Samme som setTimeout(), men gentager udførelsen af funktionen løbende.

setTimeout() og setInterval() er begge metoder til HTML DOM Window-objektet.

metoden setTimeout()

window.setTimeout(function, milliseconds);

Metoden window.setTimeout() kan skrives uden vinduespræfikset.

Den første parameter er en funktion, der skal udføres.

Den anden parameter angiver antallet af millisekunder før udførelse.

Eksempel

Klik på en knap. Vent 3 sekunder, og siden vil advare "Hej":

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

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

Prøv det selv →

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

Hvordan stopper man henrettelsen?

Metoden clearTimeout() stopper udførelsen af funktionen angivet i setTimeout().

window.clearTimeout(timeoutVariable)

Metoden window.clearTimeout() kan skrives uden vinduespræfikset.

Metoden clearTimeout() bruger variablen returneret fra setTimeout():

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

Hvis funktionen ikke allerede er blevet udført, kan du stoppe udførelsen ved at kalde clearTimeout() metode:

Eksempel

Samme eksempel som ovenfor, men med en tilføjet "Stop"-knap:

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

Prøv det selv →

<!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() gentager en given funktion ved hver given tids interval.

window.setInterval(function, milliseconds);

Metoden window.setInterval() kan skrives uden vinduespræfikset.

Den første parameter er den funktion, der skal udføres.

Den anden parameter angiver længden af tidsintervallet mellem hver udførelse.

Dette eksempel udfører en funktion kaldet "myTimer" en gang hvert sekund (som en digital holde øje).

Eksempel

Vis det aktuelle tidspunkt:

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

Prøv det selv →

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

Der går 1000 millisekunder på et sekund.

Hvordan stopper man henrettelsen?

Metoden clearInterval() stopper udførelsen af funktionen angivet i setInterval() metoden.

window.clearInterval(timerVariable)

Metoden window.clearInterval() kan skrives uden vinduespræfikset.

Metoden clearInterval() bruger variablen returneret fra setInterval():

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

Eksempel

Samme eksempel som ovenfor, men vi har tilføjet en "Stoptid"-knap:

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

Prøv det selv →

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

Flere eksempler

Endnu en simpel 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>

Et ur oprettet med en tidsbegivenhed

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