SetTimeOut and setInterval timer usage in Javascript, and js timer setinterval

Source: Internet
Author: User

SetTimeOut and setInterval timer usage in Javascript, and js timer setinterval

The setTimeOut and setInterval functions of Javascript are widely used to process latency and scheduled tasks. For example, a logon box is displayed after a webpage is opened for a period of time, the page sends asynchronous requests to obtain the latest data at intervals. However, their applications are different.

The setTimeout () method is used to call a function or computing expression after a specified number of milliseconds, while setInterval () is used to call a function or expression cyclically at a specified number of milliseconds, until clearInterval clears it. That is to say, setTimeout () is executed only once, and setInterval () can be executed multiple times. The parameters of the two functions are the same. The first parameter is the code or handle to be executed, and the second parameter is the number of milliseconds of delay.
SetTimeOut usage
The setTimeout function is used as follows:

Copy codeThe Code is as follows:
Var timeoutID = window. setTimeout (func, [delay, param1, param2,...]);
Var timeoutID = window. setTimeout (code, [delay]);

TimeoutID: the ID of the timer, which can be used to clear the timer in the clearTimeout () function.
Func: The executed function.
Code: (Alternative syntax) A code string to be executed.
Delay: the delay time, in milliseconds. If not specified, the default value is 0.

We can use window. setTimeout or setTimeout. The two statements are basically the same, except that window. setTimeout references the setTimeout function as an attribute of the global window object.

Application Example:

Copy codeThe Code is as follows:
Function timeout (){
Document. getElementById ('res'). innerHTML = Math. floor (Math. random () * 100 + 1 );
}
SetTimeout ("timeout ()", 5000 );

When the code is executed, call the timeout () function five seconds later. Click to view the demo.
SetInterval usage
The parameters and usage of the setInterval function are the same as those of the setTimeout function. For more information, see the usage of the setTimeout function. The difference is that setInterval executes the func or code at a certain time.
Application Example:

Copy codeThe Code is as follows:
Var tt = 10;
Function timego (){
Tt --;
Document. getElementById ("tt"). innerHTML = tt;
If (tt = 0 ){
Window. location. href = '/';
Return false;
}
}
Var timer = window. setInterval ("timego ()", 1000 );

The timego () function defines the page element # content displayed by tt. When tt is 0, the page is directed to the home page. Then we define a timer and call timego () every 1 second using setInterval (). In this way, timego executes 10 times, and each time the number tt is reduced by 1 until it is 0. To stop the timer, use the following code:

Copy codeThe Code is as follows:
Window. clearInterval (timer );

When the code is executed, the page jumps to the homepage 10 seconds later

In fact, setTimeout () can also implement repeated execution of a function at intervals, but we still use setTimeOut and setInterval in a simple way. In addition, javascript runs in the browser's javascript engine in a single thread mode. In actual applications, complicated tasks need to be executed in a queue, which may lead to inaccurate timer time, this issue needs to be considered in large-scale applications. This article will not go into detail.

The above is all the content of this article. I hope you will like it.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.