Timers for single and multiple execution are available in Javascript

In order to control events based on time Javascript in the IE browser there are also two basic approaches that use almost the exact syntax:

1. setTimeout, clearTimeout (a timer that executes a task after a specified time interval)

   the setTimeout function works by specifying a function that is to be executed after an amount of time has elapsed. The usage is:

   some_timer_name = setTimeout ( expression or name of function or sub, integer );

   Here expression or name of function or sub is executed ONCE after waiting integer number of milliseconds.

   To stop the process before it is executed you use:

   clearTimeout (some_timer_name) ;

   Here is the code for the example:

   var jt_name;
   var t1;
   var t2;
   function jt1()
    {
     t1= new Date();
     jts1.innerHTML=t1;
     jts2.innerHTML="";
     jts3.innerHTML="";
     jt_name = setTimeout (jt2,3000);
    }
   function jt2()
    {
     t2=new Date();
     jts2.innerHTML=t2;
     diff=t2.getTime()-t1.getTime();
     jts3.innerHTML=diff+ " milliseconds";
     clearTimeout (jt_name);
    }
   

   The "start timer" button click below calls function jt1 and:

   • t1 stores the initial start time
   • jt_name is the name assigned to the interval timer object
   • after 3000 millisecinds jt2 is called

   The function jt2:

   • stores the stop time in t2
   • calculates the start and stop time difference in seconds
   • reports the output and clears the stop time and elapsed time span blocks
   • stops the timer by using clearTimeout

   Timer Started at:
   Timer Stopped at:
   Elapsed Time =

      

2. setInterval, clearInterval (a timer that repeats a task at a specified time intervals)

   the setInterval function works by specifying a function or sub that is to be executed again and again after an amount of time has elapsed. The usage is:

   some_timer_name = setInterval ( expression or name of function, integer )

   Here expression or name of function is executed continuously waiting integer number of milliseconds between each execution.

   To stop the process during execution you use:

   clearInterval ( some_timer_name ) ;

   Here is the code for the example:

   var jt_name2;
   var jt_width;
   var t1;
   var t2;
   function jt3()
   {
     t1=new Date();
     jts4.innerHTML=t1;
     jts5.innerHTML="";
     jts6.innerHTML="";
     jt_width=1;
     document.getElementById("bar2").style.width="1px";
     jt_name2 = setInterval (jt4,250);
   }
   function  jt4()
   {
      jt_width=jt_width+1;
      if (jt_width > 300) jt_width=1;
      document.getElementById("bar2").style.width=jt_width.toString()+"px";
   
   }
   function jt5()
   {
      t2=new Date();
      diff=t2.getTime()-t1.getTime();
      jts5.innerHTML=t2;
      jts6.innerHTML=diff.toString()+ " milliseconds";
      clearInterval (jt_name2);
   }
   

   The "start timer" button click below calls function jt3 and:

   • t1 stores the initial start time
   • jt_name2 is the name assigned to the interval timer object
   • after 250 millisecinds jt4 is called

   The function jt4 lengthens the width of "bar2" by 1 pixel. Once it has reached 300 pixels wide, it resets "bar2" width to one pixel.

   The function jt5:

   • stores the stop time in t2
   • calculates the start and stop time difference in milliseconds
   • reports the output and clears the stop time and elapsed time span blocks
   • stops the interval timer by using clearInterval
   

   Timer Started at:
   Timer Stopped at:
   Elapsed Time =