I still believe Javascript is single threaded, but when I think about the event handling mechanism, I have some doubts.
Why I think like this is even while processing one event from queue, it can listen or it can push events to same queue. I created an example as below:
<html>
<head>
<script>
function clicked(){
alert("clicked in between..");
}
function longRun(){
for(var i=0;i<50000;i++){
console.log(i);
}
alert("pleted .... ");
}
</script>
</head>
<body>
<input type="button" value="quick!" onclick="clicked();"/>
<input type="button" value="long run!" onclick="longRun();"/>
</body>
</html>I still believe Javascript is single threaded, but when I think about the event handling mechanism, I have some doubts.
Why I think like this is even while processing one event from queue, it can listen or it can push events to same queue. I created an example as below:
<html>
<head>
<script>
function clicked(){
alert("clicked in between..");
}
function longRun(){
for(var i=0;i<50000;i++){
console.log(i);
}
alert("pleted .... ");
}
</script>
</head>
<body>
<input type="button" value="quick!" onclick="clicked();"/>
<input type="button" value="long run!" onclick="longRun();"/>
</body>
</html>When I click on long run! it will take some time to plete, but in the meanwhile if I click on quick! it will be added to the event queue and will be executed immediately after the long run event.
What is actually happening? Can anyone explain / correct me
Except for webWorkers (which we aren't talking about here), there is only one "user thread" per window in a browser. That means there's only one thread running your user Javascript.
This does not mean that the browser engine under the covers does not have some other threads to handle non-Javascript processing. In fact, this is very likely the case. But, since these other possible threads, never actually run any of your Javascript or affect any of your Javascript variables, they don't directly affect the JS execution environment.
Yes, these other threads may indeed insert things into the JS event queue that will be picked up later when the main JS thread is ready to process the next event.
See this answer How does JavaScript handle AJAX responses in the background? for more info and a list of related articles.
There is only one thread per tab. This thread does both JavaScript execution and screen updates. While longRun is executing, you cannot react to a click on a button; the event you registered will be fired after all 50000 iterations are plete.
To clarify: events get put on a queue. The queue is getting executed in order by the tab thread.
EDIT: And, indeed, there's workers, but they act as if they were executing in a different tab - they have their own context, and can only municate with the invoking program using postMessage.
every browser use stack if you use safari so you will see in inspect element that the operation are putted in a stack so according to your script code first it goes to plete the loop of 5000 iteration.
Javascript works on single thread.Event are queued and processed in fifo order.
What we are doing is writing event handler that is nothing but callback function that will be executed once event is processed from queue so its single threaded but asynchronous in nature.
You can learn more about it from http://blog.carbonfive./2013/10/27/the-javascript-event-loop-explained/