StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Below the covers, javascript has an event queue. Each time a javascript thread of execution finishes, it checks to see if there is another event in the queue to process. If there is, it pulls it off the queue and triggers that event (like a mouse click, for example).</p> <p>The native code networking that lies under the ajax call will know when the ajax response is done and an event will get added to the javascript event queue. How the native code knows when the ajax call is done depends upon the implementation. It may be implemented with threads or it may also be event driven itself (it doesn't really matter). The point of the implementation is that when the ajax response is done, some native code will know it's done and put an event into the JS queue. </p> <p>If no Javascript is running at the time, the event will be immediately triggered which will run the ajax response handler. If something is running at the time, then the event will get processed when the current javascript thread of execution finishes. There doesn't need to be any polling by the javascript engine. When a piece of Javascript finishes executing, the JS engine just checks the event queue to see if there is anything else that needs to run. If so, it pops the next event off the queue and executes it (calling one or more callback functions that are registered for that event). If nothing is in the event queue, then the JS interpreter has free time (garbage collection or idle) until some external agent puts something else in the event queue and wakes it up again.</p> <p>Because all outside events go through the event queue and no event is ever triggered while javascript is actually running something else, it stays single threaded.</p> <p>Here are some articles on the details:</p> <ul> <li><a href="http://ejohn.org/blog/how-javascript-timers-work/" rel="nofollow noreferrer">How Javascript Timers Work - written by John Resig</a> </li> <li><a href="http://javascript.info/tutorial/events-and-timing-depth" rel="nofollow noreferrer">Events and Timing in Depth</a> </li> <li><a href="http://www.w3.org/TR/html5/webappapis.html#event-loops" rel="nofollow noreferrer">W3 spec: HTML5 event loops</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop" rel="nofollow noreferrer">MDN article on Event Loop</a></li> <li><a href="http://thomashunter.name/blog/the-javascript-event-loop-presentation/" rel="nofollow noreferrer">Presentation on JS event queue</a></li> <li><a href="http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/" rel="nofollow noreferrer">The JavaScript Event Loop: Explained</a></li> <li><a href="https://sking7.github.io/articles/389411742.html" rel="nofollow noreferrer">Five Patterns to Help Tame Asynchronous Javascript</a></li> <li><a href="https://thomashunter.name/blog/the-javascript-event-loop-presentation/" rel="nofollow noreferrer">Javascript Event Loop Presentation</a></li> <li><a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ" rel="nofollow noreferrer">Video Discussing How Javascript Works (including event loop at 10:27)</a></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload