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, Oct 24 '12 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, Oct 24 '12 at 11:58
This link could be useful http://www.phpied.com/sleep-in-javascript/ — jacoz, Oct 24 '12 at 12:05

HBP · Answer 1 · 2012-10-24T12:57:07.777

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-24T12:04:02.057

3

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.

edited Oct 24 '12 at 12:04

answered Oct 24 '12 at 11:57

lrsjng

2,615
1
19
23

2

@enrmarc Yeah. You handle the fact that some time has passed. – John Dvorak Oct 24 '12 at 11:59

jacoz · Answer 3 · 2012-10-24T12:06:40.337

2

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/

edited Oct 24 '12 at 12:06

answered Oct 24 '12 at 11:55

jacoz

3,508
5
26
42

Paul Knopf · Answer 4 · 2012-10-24T16:45:55.263

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 '12 at 16:45

answered Oct 24 '12 at 11:58

Paul Knopf

9,568
23
77
142

I counted twice in the first couple of paragraphs that article stating that they are not executed in a separate thread. – sje397 Oct 24 '12 at 12:08
Not really another thread since JavaScript engines are single-threaded, but the link is a good insight nonetheless – andyb Oct 24 '12 at 12:08

JavaScript setInterval and setTimeout

4 Answers4

Linked