JavaScript setInterval and setTimeout

Question

The next code display the date every 1 sec and then stops.

(function() { var i = setInterval(function() { console.log(new Date()); }, 1000); console.log("Hi"); setTimeout(function() { clearInterval(i); }, 3000); console.log("Hola"); })();

Output:

Hi Hola Wed Oct 24 2012 13:35:27 GMT+0200 (CEST) Wed Oct 24 2012 13:35:28 GMT+0200 (CEST) Wed Oct 24 2012 13:35:29 GMT+0200 (CEST)

But I don't know why Hi and Hola are displayed first. Also, why setTimeout is executed? It is not supposed that setInterval is executed every 1 sec and nothing else can be executed?. (Does the code above runs on the order in which it is written?) Thanks.

No. setInterval and setTimeout return immediately, and your function continues. Execution of other code will be interrupted when the timeout expires at a later time to execute the code you provided to those calls. — sje397
– sje397, Commented Oct 24, 2012 at 11:55
@sje397 excution of the running code will not be suspended. Instead, the timed events are delayed if javascript is running at the time. — John Dvorak
– John Dvorak, Commented Oct 24, 2012 at 11:58

HBP · Accepted Answer · 2012-10-24 12:57:07Z

The comments show the execution order

(function() { // 0 anonymous function is called inline var i = setInterval(function() { // 1 setInterval **schedules** the function // parameter to be executed every second console.log(new Date()); }, 1000); console.log("Hi"); // 2 Display 'Hi' on console setTimeout(function() { // 3 **Schedule** the function parameter to // execute after three seconds clearInterval(i); }, 3000); console.log("Hola"); // 4 Display 'Hola' on console })(); // 5 Display date from setInterval function // 6 Display date from setInterval function // 7 Display date from setInterval function // 8 Cancel setInterval executed from // setTimeout function

Hope this clears up your confusion.

lrsjng · Accepted Answer · 2012-10-24 12:04:02Z

setTimeout as well as setInterval only register functions (callbacks) but then go straight to the next command.

Therefor Hi and Hola are printed before the first callbacks are called.

First callback will be that of setInterval after 1 sec, then again after 2 sec.. After 3 seconds setTimeout kicks in and clears setInterval.

@enrmarc Yeah. You handle the fact that some time has passed.

jaco · Accepted Answer · 2012-10-24 12:06:40Z

Everything out setTimeout() and setInterval() is executed anyway. It's not the sleep() PHP's method... sadly!

However, this link could be useful: http://www.phpied.com/sleep-in-javascript/

Paul Knopf · Accepted Answer · 2012-10-24 16:45:55Z

2

http://ejohn.org/blog/how-javascript-timers-work/

Those two events are asynchronous. They are queued/executed at the next available moment, not at the exact time "setTimeout" or "setInterval" is called.

edited Oct 24, 2012 at 16:45

answered Oct 24, 2012 at 11:58

Paul Knopf

9,80424 gold badges83 silver badges158 bronze badges

2 Comments

sje397 Over a year ago

I counted twice in the first couple of paragraphs that article stating that they are not executed in a separate thread.

andyb Over a year ago

Not really another thread since JavaScript engines are single-threaded, but the link is a good insight nonetheless

Collectives™ on Stack Overflow

JavaScript setInterval and setTimeout

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Linked

Related