The use of settimeout (only once) and setinterval (same time interval) for timed refresh

Use of settimeout and setinterval

Both of these methods can be used to implement JavaScript after a fixed time period. But each has its own application scenario.

Method

In fact, settimeout and setinterval have the same syntax. They all have two parameters, one is the code string to execute, and one is the time interval in milliseconds, and the code executes after that time period.

However, the two functions are still different, setinterval after the execution of the code, after the fixed time interval, it will also automatically repeat the code, and settimeout only one time to execute the code.

settimeout (expression, delay time) at execution, is to delay the specified time after loading, to execute the expression once, 
 execute only once;  
 setinterval (expression, Interaction time) is not the same, it executes the expression once every specified time from loading, 
 so the two are completely different  
  Many people are used to the settimeout contained in is executed, and then uses settimeout again outside of the function to achieve the purpose of timed execution  
  The settimeout outside the function triggers the settimeout again when the function is executed, thus forming a recurring timing effect.   There are various advantages when using, 
 using setinterval, you need to stop the tick trigger manually.             Using nested settimeout in a method, you can stop the trigger by calling 
 SetTimeout no longer by the logic inside the method itself. 
 actually two things can be simulated with each other, the specific use of that, to see the need at that time.  The 
 
 is like a for to simulate all loops including branches, and also provides do, and while. 
//execute myFunction () once every 60 seconds 
 SetInterval ("MyFunction ()", 60000); 
 
 Funcition myFunction () {alert (' myFunction () ');}//Every 60 Seconds myFunction () 
 SetTimeout ("MyFunction ()", 60000    ); Requires a function trigger//such as the OnLoad event placed inside the body  
 
 

Although it appears that settimeout can only be applied to actions in On-off mode, it is possible to repeatedly invoke settimeout by creating a function loop for 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 5 seconds. If you use SetInterval, 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 the results shown will be much the same, but the big difference is that the SetTimeout method does not execute the Showtime function every 5 seconds, and it executes the Showtime function 5 seconds after each call to settimeout. This means that if the body part of the Showtime function takes 2 seconds to execute, the entire function is executed every 7 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 with successive calls, especially if the call of a function requires heavy computation and long processing time, then it is best to use settimeout. Discussion

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.

When the setinterval call executes, it returns a timer ID that can be used to access the timer in the future and, if passed to Clearinterval, terminates the execution of the called procedure Code, implemented 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 on the Stopgoallink, no matter when you click, Intervalprocess will be canceled, and will not continue to execute intervalprocess again and again. If the settimeout is canceled within the time-out period, the termination effect can also be implemented in SetTimeout, 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);

}

The use of settimeout (only once) and setinterval (same time interval) for timed refresh