JavaScript Timing Events

Met JavaScript kun je om de zoveel tijd bepaalde code laten uitvoeren. Dit noemen we timing events.

Om in JavaScript getimede gebeurtenissen te gebruiken, bestaan er twee methoden:

setInterval() – voert met een bepaalde tijdsinterval een bepaalde functie uit (blijft maar doorgaan)
setTimeout() – voert na een opgegeven tijd een bepaalde functie één keer uit

De setInterval() methode

De setInterval methode wacht een aantal milliseconden en voert daarna een bepaalde functie uit. Na de opgegeven intervaltijd, wordt de opgegeven functie telkenmale herhaald.

Syntaxis:

setInterval("JavaScript functie",milliseconden);

Het eerste argument is de uit te voeren functie.

Het tweede argument bepaalt het tijdsinterval tussen het herhaaldelijk uitvoeren van de functie. Dit tijdsinterval wordt uitgedrukt in milliseconden (1/1000 van een seconde).

Een voorbeeld: timing/interval.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JavaScript Interval</title>
  <script type="text/javascript">
    function startKlok(){
      setInterval("klok()", 1000);
    }
    function klok(){
      var datum = new Date();
      var tijd = datum.toLocaleTimeString();
      document.getElementById("klok").innerHTML = tijd;
    }
  </script>
</head>
<body onload="startKlok();">
  <p id="klok"></p>
</body>
</html>

Dit voorbeeld geeft de tijd weer. Daarbij wordt de setInterval() methode gebruikt om elke seconden de tijd telkens opnieuw weer te geven.

Stoppen

De clearInterval() methode wordt gebruikt om de setInterval() methode te onderbreken en het uitvoeren van de bijhorende functie te stoppen.

Syntaxis:

clearInterval(intervalVariabele);

Om de clearInterval() methode te kunnen gebruiken, moet je bij het activeren van een setInterval() methode een globale variabele gebruiken.

Syntaxis:

intervalVariabele = setInterval("JavaScript functie",milliseconden);

Een voorbeeld: timing/interval.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JavaScript Interval</title>
  <script type="text/javascript">
    var klokInterval;
    function startKlok(){
      klokInterval = setInterval("klok()", 1000);
    }
    function klok(){
      var datum = new Date();
      var tijd = datum.toLocaleTimeString();
      document.getElementById("klok").innerHTML = tijd;
    }
  </script>
</head>
<body onload="startKlok();">
  <p id="klok"></p>
  <input type="button" onclick="clearInterval(klokInterval);" value="Klok stoppen" />
</body>
</html>

Weergeven