SetTimeout and setinterval pits and their pros and cons

Source: Internet
Author: User

Speaking of settimeout and setinrerval everyone may feel very easy, I just contact JS is the same idea, but later in the know to see a problem, probably like this:

Example one:

SetTimeout (function () {

Console.log ("Pony");

SetTimeout (function () {arguments.callee;},1000);

},1000)

Example two:

SetInterval (function () {Console.log ("Pony");},1000);

Q. What's the difference between two and one?

To tell you the truth, I just saw this topic is a confused, because I think the two are exactly the same ah, are the interval of 1000ms after the implementation of the callback Ah, but since so asked certainly there is a difference between them, so I went to check the relevant information, sure enough, they are not only a difference, And the timer also overturned my previous cognition.

First of all, the basic meaning of these two timers I will not repeat, I think as long as a learning front-end certainly did not know. Why is it that the timer has overturned my previous cognition? Because I found that the callback function of the timer is not the equivalent of the time to execute , but there is a main JS execution process, this process is the page just loaded when the page executes in the loading sequence of JS code, there is a need to execute when the process is idle code queue, And we call the callback of the timer is equivalent (example of the above example) after 1000ms put the timer callback into the idle queue (note that the idle queue may have other code, such as click events, so the timer callback placed in the position is not necessarily the beginning of the free queue!)! as an example:

var i=0;

function A () {

T=settimeout (function () {Console.log ("xiaoming")},0);

}

A ();

Alert ("Little Red");

At this point you will find the first pop-up red, and the pop-ming!!

OK, simple can understand bit timers and JS other programs are executed in parallel, but the author of jquery has an article specifically about this queue, interested can search for a look!!

The next 2nd, is the difference between example one and example two:

SetInterval have a very annoying place is when JS main program idle time, execute code queue inside code, if we have a problem at this time, the timer is waiting until the callback execution, only to start the timing of the next cycle? Or does it start timing after the callback is inserted, regardless of the callback execution, once the timer is complete? The answer is obviously the latter, and that's why I'm talking about the setinterval, because there's a situation where the callback is not executed when we insert the callback, and it's definitely not going to happen, so if it's time for an infinite timer to insert the callback again, At this point, if the first callback in the queue is not executed, then the callback browser that is inserted again is canceled by default (this is in case the callback is executed more than once in a row) but this raises the new case that some callbacks cannot be canceled.

This is the reason why we often use example one in place of example two, and example one can avoid the above situation. Tired, very simple things I said so complicated, I am also drunk, it seems that the text is still very deficient, but my dream is a new era of the writer, this can be the whole?

SetTimeout and setinterval pits and their pros and cons

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.