StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>That's a good question. I'd love to say “yes”. I can't.</p> <p>JavaScript is usually considered to have a single thread of execution visible to scripts(*), so that when your inline script, event listener or timeout is entered, you remain completely in control until you return from the end of your block or function.</p> <p>(*: ignoring the question of whether browsers really implement their JS engines using one OS-thread, or whether other limited threads-of-execution are introduced by WebWorkers.)</p> <p>However, in reality this <em>isn't quite true</em>, in sneaky nasty ways.</p> <p>The most common case is immediate events. Browsers will fire these right away when your code does something to cause them:</p> <pre><code><textarea id="log" rows="20" cols="40"></textarea> <input id="inp"> <script type="text/javascript"> var l= document.getElementById('log'); var i= document.getElementById('inp'); i.onblur= function() { l.value+= 'blur\n'; }; setTimeout(function() { l.value+= 'log in\n'; l.focus(); l.value+= 'log out\n'; }, 100); i.focus(); </script> </code></pre> <p>Results in <code>log in, blur, log out</code> on all except IE. These events don't just fire because you called <code>focus()</code> directly, they could happen because you called <code>alert()</code>, or opened a pop-up window, or anything else that moves the focus.</p> <p>This can also result in other events. For example add an <code>i.onchange</code> listener and type something in the input before the <code>focus()</code> call unfocuses it, and the log order is <code>log in, change, blur, log out</code>, except in Opera where it's <code>log in, blur, log out, change</code> and IE where it's (even less explicably) <code>log in, change, log out, blur</code>.</p> <p>Similarly calling <code>click()</code> on an element that provides it calls the <code>onclick</code> handler immediately in all browsers (at least this is consistent!).</p> <p>(I'm using the direct <code>on...</code> event handler properties here, but the same happens with <code>addEventListener</code> and <code>attachEvent</code>.)</p> <p>There's also a bunch of circumstances in which events can fire whilst your code is threaded in, despite you having done <em>nothing</em> to provoke it. An example:</p> <pre><code><textarea id="log" rows="20" cols="40"></textarea> <button id="act">alert</button> <script type="text/javascript"> var l= document.getElementById('log'); document.getElementById('act').onclick= function() { l.value+= 'alert in\n'; alert('alert!'); l.value+= 'alert out\n'; }; window.onresize= function() { l.value+= 'resize\n'; }; </script> </code></pre> <p>Hit <code>alert</code> and you'll get a modal dialogue box. No more script executes until you dismiss that dialogue, yes? Nope. Resize the main window and you will get <code>alert in, resize, alert out</code> in the textarea.</p> <p>You might think it's impossible to resize a window whilst a modal dialogue box is up, but not so: in Linux, you can resize the window as much as you like; on Windows it's not so easy, but you can do it by changing the screen resolution from a larger to a smaller one where the window doesn't fit, causing it to get resized.</p> <p>You might think, well, it's only <code>resize</code> (and probably a few more like <code>scroll</code>) that can fire when the user doesn't have active interaction with the browser because script is threaded. And for single windows you might be right. But that all goes to pot as soon as you're doing cross-window scripting. For all browsers other than Safari, which blocks all windows/tabs/frames when any one of them is busy, you can interact with a document from the code of another document, running in a separate thread of execution and causing any related event handlers to fire.</p> <p>Places where events that you can cause to be generated can be raised whilst script is still threaded:</p> <ul> <li><p>when the modal popups (<code>alert</code>, <code>confirm</code>, <code>prompt</code>) are open, in all browsers but Opera;</p></li> <li><p>during <code>showModalDialog</code> on browsers that support it;</p></li> <li><p>the “A script on this page may be busy...” dialogue box, even if you choose to let the script continue to run, allows events like resize and blur to fire and be handled even whilst the script is in the middle of a busy-loop, except in Opera.</p></li> <li><p>a while ago for me, in IE with the Sun Java Plugin, calling any method on an applet could allow events to fire and script to be re-entered. This was always a timing-sensitive bug, and it's possible Sun have fixed it since (I certainly hope so).</p></li> <li><p>probably more. It's been a while since I tested this and browsers have gained complexity since.</p></li> </ul> <p>In summary, JavaScript appears to most users, most of the time, to have a strict event-driven single thread of execution. In reality, it has no such thing. It is not clear how much of this is simply a bug and how much deliberate design, but if you're writing complex applications, especially cross-window/frame-scripting ones, there is every chance it could bite you — and in intermittent, hard-to-debug ways.</p> <p>If the worst comes to the worst, you can solve concurrency problems by indirecting all event responses. When an event comes in, drop it in a queue and deal with the queue in order later, in a <code>setInterval</code> function. If you are writing a framework that you intend to be used by complex applications, doing this could be a good move. <code>postMessage</code> will also hopefully soothe the pain of cross-document scripting in the future.</p>

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