Introduction of JavaScript settimeout and setinterval timing mechanism

Source: Internet
Author: User
Tags setinterval time interval javascript settimeout
The code is as follows Copy Code

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.

The code is as follows Copy Code
settimeout (function () {
Alert (' Hello! ');
}, 0);
SetInterval (callbackfunction, 100);

It is assumed that the greeting method in settimeout is executed immediately, because it is not a figment of the imagination, but rather a JavaScript API document that explicitly defines how many milliseconds the second parameter meaning is, and the callback method is executed. This is set to 0 milliseconds, and is taken for granted immediately.
The same callbackfunction method for SetInterval is executed immediately at intervals of 100 milliseconds. Believe it!

But with the growing and enriching experience of JavaScript application development, one day you find a strange piece of code that you don't understand:

The code is as follows Copy Code
Div.onclick = function () {
settimeout (function () {
document.getElementById (' Inputfield '). focus ();
}, 0);
};

Since it is 0 milliseconds to execute, then what else to do with settimeout, at the moment, the firm belief has begun to waver.

Until the very last day, you accidentally wrote a bad piece of code:

The code is as follows Copy Code
settimeout (function () {
while (true) {
}
}, 100);
settimeout (function () {
Alert (' Hello! ');
}, 200);
SetInterval (callbackfunction, 200);

The first line of code into the dead loop, but soon you will find that, second, the third line is not expected, alert greetings have not seen, Callbackfunction also heard!

If the timer function is not processed, then SetInterval will continue to execute the same code until the browser window closes, or the user moves to another page. However, there are ways to terminate the execution of the settimeout and setinterval functions.

When the setinterval call completes, it returns a timer ID that can be accessed by the timer in the future and, if passed to Clearinterval, terminates the execution of the invoked process code, as follows:

File:

The code is as follows Copy Code

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 click on the Stopgoallink, no matter when the click, Intervalprocess will be canceled, will not continue to carry out repeated intervalprocess. If SetTimeout is canceled within the timeout period, this termination effect can also be implemented on settimeout


Summary:

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

However, these two functions are 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.

Related Article

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.