Use of setTimeout and setinterval

Both methods can be used to execute JavaScript after a fixed period of time. However, they have different application scenarios.

Method

In fact, setTimeout and setinterval have the same syntax. Both of them have two parameters. One is to be executed.CodeString, and a time interval in milliseconds. After that time period, the code will be executed.

However, there are differences between the two functions. After the setinterval code is executed, it automatically repeats the code after the fixed interval, setTimeout only executes the code once.

Although it seems that setTimeout can only be applied to On-Off actions, you can create a function to repeatedly call setTimeout to implement repeated operations:

File: settimeout_setinterval.js

Showtime ();

Function Showtime ()

{

VaR today = new date ();

Alert ("the time is:" + today. tostring ());

SetTimeout ("Showtime ()", 5000 );

}

Once this function is called, the time is displayed every five seconds. If setinterval is used, the corresponding code is as follows:

File: settimeout_setinterval2.js

Setinterval ("Showtime ()", 5000 );

Function Showtime ()

{

VaR today = new date ();

Alert ("the time is:" + today. tostring ());

}

The two methods may look very similar and show similar results, but the biggest difference between the two is that the setTimeout method does not execute the Showtime function every five seconds, it executes the Showtime function five seconds after each setTimeout call. This means that if the main part of the Showtime function needs to be executed in 2 seconds, the whole function will be executed every 7 seconds. While setinterval is not bound by the function called by itself, it simply repeats the function at a certain time.

If you want to execute an action accurately after a fixed interval, you 'd better use setinterval. If you don't want to interfere with each other due to continuous calls, in particular, each function call requires heavy computing and a long processing time, so it is best to use setTimeout.

Function pointer usage

The first parameter in the two timing functions is a code string. In fact, this parameter can also be a function pointer, but ie 5 in Mac does not support this. If the function pointer is used as the second parameter of the setTimeout and setinterval functions, they can execute a function defined elsewhere: SetTimeout (Showtime, 500 ); Function Showtime () { VaR today = new date (); Alert ("the time is:" + today. tostring ()); } In addition, anonymous functions can also be declared as inline functions: SetTimeout (function () {var today = new date (); Alert ("the time is:" + today. tostring () ;}, 500 );

Discussion

If the timer function is not processed, setinterval continues to execute the same code until the browser window is closed or the user switches to another page. However, there is still a way to terminate the execution of the setTimeout and setinterval functions.

When the setinterval call is completed, it returns a timer ID, which can be used to access the timer in the future. If the ID is passed to clearinterval, you can terminate the execution of the called Process Code. The specific implementation is as follows:

File: settimeout_setinterval3.js (excerpt)

VaR intervalprocess = setinterval ("alert ('Goal! ') ", 3000 );

VaR stopgoallink = Document. getelementbyid ("stopgoallink ");

Attacheventlistener (stopgoallink, "click", stopgoal, false );

Function stopgoal ()

{

Clearinterval (intervalprocess );

}

As long as you click stopgoallink, no matter when you click it, intervalprocess will be canceled and will not continue to execute intervalprocess repeatedly in the future. If setTimeout is canceled within the time-out period, the termination effect can also be implemented on setTimeout. The specific implementation is as follows:

File: settimeout_setinterval4.js (excerpt)

VaR timeoutprocess = setTimeout ("alert ('Goal! ') ", 3000 );

VaR stopgoallink = Document. getelementbyid ("stopgoallink ");

Attacheventlistener (stopgoallink, "click", stopgoal, false );

Function stopgoal (){

Cleartimeout (timeoutprocess );

}