confusion about timers in Javascript

Question

I'm a bit confused with timers in Javascript. I've been playing around with timers.

I'm confused with how the queuing process in asychronous events happen. I have read about the article about how asynchronous events are queud. But i find it hard to wrap my head around the queuing process.

Here's the code:

http://jsbin.com/iwahuf/2/edit

In the code that i have posted would the timers be queud in sequence. Wouldn't the timers in the event queue be executed FIFO (First In, First Out).

Here's what i have in mind in the event queue.

First Timer w/ 500ms delay
Second Timer w/ 600ms delay
Third Timer w/ 300ms delay
Fourth Timer w/ 400ms delay

In my opinion, since the first timer has been the first to be registered in the Event queue, it will be the first to be executed and only after 500ms will the second timer be executed and so on.

Please enlighten me on this matter. I'm a litte confused. I think my understanding of the queuing process is not quite right.

Thanks in advance.

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

Registering a timer doesn't stop your code. You're registering all timers at the same time, the scheduler will try to execute them N ms after the time of registration.

This means that

The third timer you set will be executed first 300 ms after your main code is executed
then it will be the fourth 400 ms after the main code was executed
then the first and second

If you want to queue your timers, either you chain them (by making each of them call the next one) or (much lighter and simpler if the tasks are short) you compute yourself the times :

var time = 0;
setTimeout(function(){
  console.log("First Timer");
}, time += 500);
setTimeout(function(){
  console.log("Second Timer");
}, time += 600);
console.log("Executed immediately");
setTimeout(function(){
  console.log("Third Timer");
}, time += 300);
setTimeout(function(){
  console.log("Fourth Timer");
}, time += 400);

In this somewhat related answer I give an implementation of a simple queue.

edited May 23 '17 at 11:57

Community

1
1

answered May 30 '13 at 11:17

Denys Séguret

372,613
87
782
758

Right. There is no "queue of timers". If you want that, you need to implement that on your own. I.e. register the second timer within the first would add them. – Axel Amthor May 30 '13 at 11:19
Thanks for your response. I'm a little confused by your statement that they are executed at the same time. Isn't Javascript single threaded so I think only one async event or timer will be registered in the event queue. – chanHXC May 30 '13 at 11:21
@chanHXC well, not exactly the same time, but JS is fast enough so that it feels like the same time. – Denys Séguret May 30 '13 at 11:23
@dystroy, does that mean that the timers are executed based on delays even though another timer has been registered earlier in the queue? – chanHXC May 30 '13 at 11:36
Yes. all the setTimeout are executed at the same time (well, there might be one or two ms due to the code execution time) and their callbacks are scheduled counting from this time. – Denys Séguret May 30 '13 at 11:41

score 1 · Answer 2 · answered May 30 '13 at 11:20

1

No, timers are not first-in-first out.

It's not the timers themselves that are put in the event queue - when timers expire they result in a "timer elapsed" event being added to the FIFO event queue as they expire.

How timer objects actually detect that they've expired and create those events is out of scope, and probably implementation dependent.

answered May 30 '13 at 11:20

Alnitak

334,560
70
407
495

i stand to be corrected here, so does that mean that the code/process inside the timer will be executed N delay, then after the timer has elapsed should the code/process be registered to the event queue unless the browser is free to execute something. – chanHXC May 30 '13 at 11:45

score 1 · Answer 3 · answered May 30 '13 at 11:21

1

When a timeout is set in Javascript, it does not halt execution of the following code. instead, it delays the execution of the function set to run on timeout. TO acheive your expected results, your code would need to look like this:

setTimeout(function(){
  console.log("First Timer");

  setTimeout(function(){
    console.log("Second Timer");

    setTimeout(function(){
      console.log("Third Timer");

        setTimeout(function(){
          console.log("Fourth Timer");
        }, 400);

    }, 300);

  }, 600);

}, 500);

console.log("Executed immediately");

Hope this helps!

answered May 30 '13 at 11:21

Khior

1,244
1
10
20

thanks for the response. I think you're right. even though i'm still a little bit confused. – chanHXC May 30 '13 at 11:38
From your comments, it seems to me that you have a good enough understanding of computer theory to find this article useful: http://ejohn.org/blog/how-javascript-timers-work/ – Khior May 30 '13 at 12:56

confusion about timers in Javascript

3 Answers3