Web Programming TutorialsHow to implement timing events in javascript

How to implement timing events in javascript

In this session we will learn how to implement timing events in javascript .

  • There are two methods used in JavaScript which will help us learn how to implement timing events in javascript :
    1. setInterval() :- This method will execute every time after specified milliseconds.

      window.setInterval(“javascript methodname”,milliseconds);
    2. setTimeout() :- This method is executed only once after completing the specified interval of time
    3. window.setTimeout(“javascript methodname”,milliseconds);

  • Let’s study these methods in detail

  1. setInterval() function
    1. The setInterval() method will wait for a given number of milliseconds i.e. it will wait for the number of milliseconds specified in its parameter and after that it will execute the function after every regular intervals as specified .
    2. Create a new html file and write the following code which will display the current time and date :
    3. <html>
      <body>
      <p>This will show current date</p>
      <p id="currentDate"></p>
      <p>This will show the current time and starts the clock:</p>
      <p id="currentTime"></p>
      <script>
      var setTime=setInterval(function(){timer()},500);
      function timer()
      {
      var d=new Date();
      var t=d.toLocaleTimeString();
      var c=d.toLocaleDateString();
      document.getElementById("currentTime").innerHTML=t;
      document.getElementById("currentDate").innerHTML=c;
      }
      </script>
      </body>
      </html>
      

    4. Here is the screen shot of the code :
    5. how to implement timing events in javascript 1

    6. Now double click on your html file and you will have following output :
    7. timing event 2

    8. Here is the explanation of the timer() function used in the code :
      1. Variable d is used to make the object of the class Date
      2. Current time is stored in variable t .
      3. The current date is stored in the variable c through the object d which calls the method of class Date known as toLocaleDateString()
      4. The next two lines are used to display the current time and date .
      5. var setTime=setInterval(function(){timer()},500) In this code the setInterval method is used to start the timer after the interval of 500 milliseconds i.e. half seconds.

    9. Now if we want to stop the time for the function setInterval then we have to use the clearInterval method .
    10. clearInterval method is used to stop the further execution of setInterval method .
    11. This can be explained with reference to the above code just by adding a button and stop function which is used to stop the time.
    12. <html>
      <body>
      <p>This will show current date</p>
      <p id="currentDate"></p>
      <p>This will show the current time and starts the clock:</p>
      <p id="currentTime"></p>
      <button onclick="stop()">Stop</button>
      <script>
      var setTime=setInterval(function(){timer()},500);
      function timer()
      {
      var d=new Date();
      var t=d.toLocaleTimeString();
      var c=d.toLocaleDateString();
      document.getElementById("currentTime").innerHTML=t;
      document.getElementById("currentDate").innerHTML=c;
      }
      function stop()
      {
      clearInterval(setTime);
      }
      </script>
      </body>
      </html>
      

    13. Here is the screen shot of the updated code with stop functionality :
    14. javascript timing events 3

    15. Output is shown below :
    16. timing events4

  2. setTimeout() function
    1. The setTimeout method is used to provide an interval for the specified time and is executed only once .
    2. Here is an example that implements the setTimeout() function :
    3. <style type="text/css">#submit{
      height: 5em;
      width: 20em;
      } </style>
      <script type="text/javascript">
          function countDown(secs,elem)
          {
              var element = document.getElementById(elem);
              element.innerHTML = "<h2>Please wait for seconds " +secs+ " seconds</h2>";
              if(secs < 1)
              {
                  //this functions clear the timer
                  clearTimeout(timer);
                  element.innerHTML = '<h2>Tada Countdown Complete</h2>';
              }
              secs--;
              // executes a function, once, after waiting a specified number of milliseconds
              var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
          }
      </script>
      <div id="status" >
          <h2><button onclick="countDown(10,'status')" id="submit">Click Me</button></h2>
      </div>
      

    4. Screen shot of the code is given below :
    5. javascript 5

    6. Now when you double click on your setTimeout.html file you will have the following output :
    7. 6
      7
      how to implement timing events in javascript 8

  3. Thus we have successfully learnt how to implement timing events in javascript and implemented setInterval() and setTimeout() functions in javascript .

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -