JavaScript -timinggebeurtenissen
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript kan in tijdsintervallen worden uitgevoerd. Dit worden timinggebeurtenissen genoemd. |
Timing Evenementen
Het window
object staat uitvoering van code toe met gespecificeerde tijdsintervallen.
Deze tijdsintervallen worden timinggebeurtenissen genoemd.
De twee belangrijkste methoden om met JavaScript te gebruiken zijn:
setTimeout(function, milliseconds
)
Voert een functie uit, na een gespecificeerd aantal milliseconden te hebben gewacht.setInterval(function, milliseconds
)
Hetzelfde als setTimeout(), maar herhaalt de uitvoering van de functie continu.
De setTimeout()
en setInterval()
zijn beide methoden van het HTML DOM Window-object.
De setTimeout()-methode
window.setTimeout(function, milliseconds);
De window.setTimeout()
methode kan worden geschreven zonder het venstervoorvoegsel.
De eerste parameter is een uit te voeren functie.
De tweede parameter geeft het aantal milliseconden voor uitvoering aan.
Voorbeeld
Klik op een knop. Wacht 3 seconden en de pagina waarschuwt "Hallo":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Hoe de uitvoering stoppen?
De clearTimeout()
methode stopt de uitvoering van de functie die is opgegeven in setTimeout().
window.clearTimeout(timeoutVariable)
De window.clearTimeout()
methode kan worden geschreven zonder het venstervoorvoegsel.
De clearTimeout()
methode gebruikt de variabele die wordt geretourneerd door setTimeout()
:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Als de functie nog niet is uitgevoerd, kunt u de uitvoering stoppen door de methode aan te roepen clearTimeout()
:
Voorbeeld
Hetzelfde voorbeeld als hierboven, maar met een toegevoegde "Stop"-knop:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
De methode setInterval()
De setInterval()
methode herhaalt een bepaalde functie op elk gegeven tijdsinterval.
window.setInterval(function, milliseconds);
De window.setInterval()
methode kan worden geschreven zonder het venstervoorvoegsel.
De eerste parameter is de uit te voeren functie.
De tweede parameter geeft de lengte van het tijdsinterval tussen elke uitvoering aan.
In dit voorbeeld wordt elke seconde een functie met de naam "myTimer" uitgevoerd (zoals een digitaal horloge).
Voorbeeld
Toon de huidige tijd:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Er zijn 1000 milliseconden in een seconde.
Hoe de uitvoering stoppen?
De clearInterval()
methode stopt de uitvoeringen van de functie die is opgegeven in de methode setInterval().
window.clearInterval(timerVariable)
De window.clearInterval()
methode kan worden geschreven zonder het venstervoorvoegsel.
De clearInterval()
methode gebruikt de variabele die wordt geretourneerd door setInterval()
:
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Voorbeeld
Hetzelfde voorbeeld als hierboven, maar we hebben een knop "Stoptijd" toegevoegd:
<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>