3

I've read a lot of articles about JavaScript single-threaded execution model, event-loop and event queue.

One thing is not clear though. I created a fiddle to illustrate my question: http://jsfiddle.net/yzpmf67f/

<button onClick="window.compute()">Do computation</button>
<button onClick="alert('doing')">Do something else</button>

window.compute = function compute() {
var result = 0;
for (var i = 0; i < 100000; i++) {
    for (var j = 0; j < 100000; j++) {
        result = i + j;
    }
};
var textnode = document.createTextNode(result);
document.body.appendChild(textnode);

}

If you click on "Do computation" button it will take some time and block the page. But if you click on "Do something else" button, while the page is still hanging, it will still be added to the queue and executed after our computation has finished.

So if JS is single-threaded who is putting UI events into event queue while we are computing something else?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Konstantin Milyutin
  • 11,946
  • 11
  • 59
  • 85

1 Answers1

6

So if JS is single-threaded who is putting UI events into event queue while we are computing something else?

Not JS obviously :-) It's one of the other threads in a browser, the one that is responsible for managing UI events (which are, in turn, supplied by the OS) in this case. In fact, there are a lot of things running in parallel to the JS engine, for example the thread(s) that are managing network connections (and queuing ajax events).

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • so the event queue can be supplied by our code using, for example, `setTimeout()` or by browser (I/O, UI, etc). Is it correct? – Konstantin Milyutin Mar 16 '15 at 16:43
  • 1
    Yes, the event queue is always supplied from some asynchronous background operations. In the case of `setTimeout`, it would create a background timer object that fires the event after a period of time. – Bergi Mar 16 '15 at 16:46
  • 1
    @damluar Yes. This behaviour is moving away from the realm of the webpage to that of the OS and how messages are delivered. In the case in your question (on windows at least), it will have delivered (amongst others) "mouse down" and "mouse up" events to the browser for processing. It's when these events are not handled in a timely manner by an application that you get the "not responding" behaviour. These mousedown/mouseup events will eventually get handled by the browser and translated into the click event on your button. – James Thorpe Mar 16 '15 at 16:48
  • Great. Thank you guys! One more question. When I call `setTimeout(..., 2000)` and `setTimeout(..., 1000)` functions, the second will fire first, which is good. But I thought that they will add 2 events to the queue in the order they were executed. How can JS handle this with just one thread? The same question is http://stackoverflow.com/questions/21718774, but it is not explained why this happens. – Konstantin Milyutin Mar 16 '15 at 16:56
  • 2
    @damluar The events don't get added to the queue until the timeout has happened. How the script host deals with the timeout is an implementation detail (ie it will vary between browsers etc) - it's only when the timeout has elapsed that the host will put the callback on the execution queue. – James Thorpe Mar 16 '15 at 16:57