Timer object for JavaScript

1,JavaScript Timers , we can execute the code after the set interval, not immediately after the function is Called.

Timer type:
1) one-time timer: fires only once after the specified delay Time.
2) interval trigger timer: fires once every time interval is Specified.

Timer method:

1) setinterval (): Executes the code at the specified time after the page is Loaded.

//Grammarsetinterval (code, Interaction time);//parameter Description: 1. code: the function to invoke or the code string to Execute. 2. Interaction time: The time interval between periodic execution or invocation of an expression, in milliseconds (1s=1000ms). //return value: A value that can be passed to clearinterval () to suppress periodic execution of "code." //Call Function Format: (suppose there is a clock () function):SetInterval ("Clock ()", +)//orSetInterval (clock, +)//Example<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Timer </title><script type="Text/javascript">var int=setinterval (clock, +)//call timer function clock () {varTime=NewDate (); document.getElementById ("Clock"). value =time ; }</script>"text"Id="Clock"Size=" -"/> </form></body>
2) Cancel Timer clearinterval (): clearinterval () method cancels the interaction time set by SetInterval ().
//Grammarclearinterval (id_of_setinterval)//parameter description: id_of_setinterval: The ID value returned by setinterval (). //Example<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Timer </title><script type="Text/javascript">function Clock () {varTime=NewDate (); document.getElementById ("Clock"). value =time ; }//Call the clock function every 100 milliseconds and assign the value of the return value to I     var I=setinterval ("Clock ()", -);</script>"text"Id="Clock"Size=" -"/> <input type="Button"Value="Stop"onclick="clearinterval (i)"/> </form></body>//the clock () function is called every 100 milliseconds and the time is Displayed. Stop time when you click the button
3) setTimeout () timer, after the load delay after the specified time, go to execute an expression, only once.
//GrammarsetTimeout (code, Delay time);//parameter Description: 1. The function to invoke or the code string to Execute. 2. Delay time: The amount of time, in milliseconds (1s=1000ms), to wait before executing the Code. //Example 1//3 seconds after opening a page, a prompt box pops up<! DOCTYPE Html>"Text/javascript">SetTimeout ("alert (' hello! ')", the );</script>//Example 2//when the button start is clicked, the setTimeout () function is called, and a prompt box pops up after 5 seconds .<! DOCTYPE Html>"Text/javascript">function Tinfo () {varT=settimeout ("alert (' hello! ')", the); }</script>"Button"Value="Start"onclick="tinfo ()"></form></body>//Example 3//creating a counter that runs in an infinite loop requires writing a function to invoke ITSELF. In the following code, when the button is clicked, the input field is counted starting from 0<! DOCTYPE Html>"Text/javascript">varnum=0; function Numcount () {document.getelementbyid ('txt'). value=num ; Num=num+1; SetTimeout ("Numcount ()", +); }</script>"text"Id="txt"/><input type="Button"Value="Start"onclick="Numcount ()"/></form></body>
4) Cancel Timer cleartimeout (), setTimeout () and cleartimeout () use, stop Timer.
//Grammarcleartimeout (id_of_settimeout)//parameter description: id_of_settimeout: The ID value returned by setTimeout (). This value identifies the deferred execution code block to be Canceled. //example: Add a "stop" button to stop this counter<! DOCTYPE Html>"Text/javascript">varnum=0, i; function Timedcount () {document.getelementbyid ('txt'). value=num; Num=num+1; I=settimeout (timedcount, +); } setTimeout (timedcount, +);  function Stopcount () {cleartimeout (i); }</script>"text"Id="txt"> <input type="Button"Value="Stop"onclick="Stopcount ()">//stop Button </form></body>
the difference between setinterval and settimeout:
     
     
     
     
     
     In this way, the settimeout outside the function triggers the settimeout again when the function is executed to form a recurring timing effect.
     
     3) the use of each has its own advantages, the use of setinterval, the need to manually stop the tick trigger. The use of nested settimeout in the method, you can no longer call settimeout based on the internal logic of the method is equal to stop the Trigger.
//SetTimeout ExampleshowTime (); function showTime () {varDay =NewDate (); Alert ("Time Is:"+day.tostring ()); SetTimeout ("showTime ()", +);}//SetInterval ExampleSetInterval ("showTime ()", +); function ShowTime () {varDay =NewDate (); Alert ("Time Is:"+day.tostring ());}the Two methods may look very similar, and the results will be very much the same, but the big difference is that the SetTimeout method does not execute the Showtime function every 1 seconds, It is 1 seconds after each call to SetTimeout to execute the Showtime Function. This means that if the body part of the Showtime function takes 2 seconds to execute, the entire function is executed every 3 seconds. But setinterval is not bound by the function that he calls, it simply repeats the function once every Time. if it is required to perform an action precisely after every fixed interval, it is best to use setinterval, and if you do not want to cause mutual interference due to successive calls, especially if the call of a function requires heavy computation and long processing time, Then it is best to use Settimeout. If the timer function is not processed, then SetInterval will continue to execute the same code until the browser window closes, or the user goes to another page. however, There are ways to terminate the execution of the settimeout and SetInterval Functions. 
Timer object for JavaScript