Timers

The setInterval() and setTimeout() functions provide ways of setting a function that is called after a specified time interval. The arguments that they take are a function to be called and the number of milliseconds that should elapse before they are called. The two functions differ in that setInterval() calls its function repeatedly after each specified slice of time, while setTimeout() only calls its function only once after the specified slice of time.

However, both function return integer IDs that identify the timer that they create. These IDs can be passed into clearInterval() or clearimeout() to stop the timers from running. In the example code below, we store these IDs as iIntervalID and iTimeOutID.

Below, we make use of these timing functions to create a simple timers that count seconds. We can start and stop these timers by pressing the corresponding buttons.

Timers.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's JavaScript: A Time Interval Clock with Stop and Start Buttons</title>
    <script type="text/javascript">
      var iIntervalID = 0;
      var iIntervalCount = 0;
      var bHasStartedInterval = false;
      // Start a new timer if one is not already running.
      function IntervalStart() {
        if (!bHasStartedInterval) {
          iIntervalID = setInterval(SetInterval, 1000);
          document.getElementById("interval_id").innerHTML = "Interval ID: " + iIntervalID;
          bHasStartedInterval = true;
        }
      }
      // Stop the timer if one is alrady running.
      function IntervalStop() {
        if (bHasStartedInterval) {
          clearInterval(iIntervalID);
          bHasStartedInterval = false;
        }
      }
      function SetInterval() {
          document.getElementById("interval_count").innerHTML = "Interval Count: " + iIntervalCount;
          ++iIntervalCount;
      }

      var iTimeOutID = 0;
      var iTimeOutCount = 0;
      var bHasStartedTimeOut = false;
      // Start a new timer if one is not already running.
      function TimeOutStart() {
        if (!bHasStartedTimeOut) {
          iTimeOutID = setTimeout(SetTimeOut, 1000);
	      document.getElementById("time_out_id").innerHTML = "TimeOut ID: " + iTimeOutID;
          bHasStartedTimeOut = true;
        }
      }
      // Stop the timer if one is alrady running.
      function TimeOutStop() {
        if (bHasStartedTimeOut) {
          // Stop the current timer.
          clearTimeout(iTimeOutID);
          bHasStartedTimeOut = false;
        }
      }
      function SetTimeOut() {
          document.getElementById("time_out_count").innerHTML = "TimeOut Count: " + iTimeOutCount;
          ++iTimeOutCount;
          // This needs to be reset every time this called, because Timeout only calls this once.
          bHasStartedTimeOut = false;
      }
    </script>
  </head>
  <body>
    <p id="time_out_id">TimeOut ID: </p>
    <p id="time_out_count">TimeOut Count: </p>
    <button onclick="TimeOutStart()">Start</button>
    <button onclick="TimeOutStop()">Stop</button>
    <p id="interval_id">Interval ID: </p>
    <p id="interval_count">Interval Count: </p>
    <button onclick="IntervalStart()">Start</button>
    <button onclick="IntervalStop()">Stop</button>
  </body>
</html>

Core JavaScript

Timers

Timers.html

Output