javascript - Understanding how alert() impacts browser event loop - Stack Overflow

admin管理员组

文章数量:1289529

I'm considering adding an alert() to our Javascript utility assert function.

We're an ajax-heavy application, and the way our framework (Ext) implements ajax by polling for the ajax response with setInterval instead of waiting for readystate==4, causes all of our ajax callbacks to execute in a setInterval stack context -- and an exception/assert blowing out of it usually fails silently.

How does a low-level alert() impact the browser event loop? The messagebox by definition must allow the win32 event loop to pump (to respond to the mbox button). Does that mean other browser events, like future setIntervals generated by our framework, resize events, etc, are going to fire? Can this cause trouble for me?

IIRC: you can use Firefox2 and Firefox3.5 to see the difference I'm talking about.

alert('1');
setTimeout(function(){alert('2');}, 10);
alert('3');

Firefox3.5 shows 1-3-2. Firefox2^[1] shows 1-2&3 (2 and 3 stacked on top of each other simultaneously). We can replicate 1-2&3 in IE8 with a win32 mbox launched from ActiveX as well, instead of an alert, which wreaked havoc on us back in the day, and I want to make sure we don't go down that path again.

Can anyone point me to specific low level resources that explain this behavior, what the expected behavior is here, and what exactly is going on at a low level, including why the behavior changed across Firefox versions?

^[1] you can replicate this on Spoon which I can't get working right now. I just reproduced it in a VM with Firefox 2.0.0.20.

I'm considering adding an alert() to our Javascript utility assert function.

We're an ajax-heavy application, and the way our framework (Ext) implements ajax by polling for the ajax response with setInterval instead of waiting for readystate==4, causes all of our ajax callbacks to execute in a setInterval stack context -- and an exception/assert blowing out of it usually fails silently.

How does a low-level alert() impact the browser event loop? The messagebox by definition must allow the win32 event loop to pump (to respond to the mbox button). Does that mean other browser events, like future setIntervals generated by our framework, resize events, etc, are going to fire? Can this cause trouble for me?

IIRC: you can use Firefox2 and Firefox3.5 to see the difference I'm talking about.

alert('1');
setTimeout(function(){alert('2');}, 10);
alert('3');

Firefox3.5 shows 1-3-2. Firefox2^[1] shows 1-2&3 (2 and 3 stacked on top of each other simultaneously). We can replicate 1-2&3 in IE8 with a win32 mbox launched from ActiveX as well, instead of an alert, which wreaked havoc on us back in the day, and I want to make sure we don't go down that path again.

Can anyone point me to specific low level resources that explain this behavior, what the expected behavior is here, and what exactly is going on at a low level, including why the behavior changed across Firefox versions?

^[1] you can replicate this on Spoon which I can't get working right now. I just reproduced it in a VM with Firefox 2.0.0.20.

• javascript
• winapi
• dom-events
• settimeout

Share Improve this question Follow edited Jul 5, 2020 at 14:52 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 7, 2011 at 17:11 Dustin GetzDustin Getz 21.8k1515 gold badges8686 silver badges132132 bronze badges 3

• Excellent question. In my experience, the implementation of alert differs dramatically across browsers. In general, I would avoid alert where these things matter and use custom (i.e. jQuery UI-style) dialogs. – Oliver Moran Commented Jun 7, 2011 at 17:19
• @Oliver -- yeah, we actually chose to use a DOM-based popup, but I still would like to understand the alert internals. – Dustin Getz Commented Jun 7, 2011 at 18:56
• 1 “The messagebox by definition must allow the win32 event loop to pump” – some operating systems — Mac OS X, for example – use nested event loops. An alert might run a modal event loop of its own which blocks the main event loop. It’s likely that some web browsers do something similar for dialog boxes. – s4y Commented Jun 8, 2011 at 21:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

First, timers in javascript are not very precise. Intervals smaller than 30ms might be considered all the same, and implementations vary. Don't rely on any implicit ordering.

An alert() will always halt the event loop. If an event or timer fires during the alert, they will be queued and called after the event loop resumes (the alert box is closed).

Take this example:

var hello = document.getElementById('hello')

setTimeout(function(){
  hello.style.backgroundColor = 'lime'
}, 5000)

alert('Stop!')

setTimeout(function(){
  hello.innerHTML = 'collaborate'
}, 20)

setTimeout(function(){
  hello.innerHTML = 'listen'
}, 1000)

There are two possible outes:

1. You close the alert box in under 5 seconds. The two timers that follow will be set and fire at specified intervals. You can see that the event loop is halted because regardless of how long you wait to close the alert, "listen" will always take 1s to execute.

2. You take longer than 5 seconds to close the alert. The first interval (bgColor) will have passed, so it executes immediately, followed by the two timers being set and called.

http://jsbin./iheyi4/edit

As for intervals, while the event loop is stopped it also "stops time", so in this case:

i = 0

setInterval(function(){
  document.getElementById('n').innerHTML = ++i
}, 1000)

setTimeout(function(){
  alert('stop')
}, 5500)

Regardless of how long you take to close the alert, the next number will always be 6 - the setInterval won't fire multiple times.

http://jsbin./urizo6/edit

I haven't been able to replicate the 1-2&3 case, but here is a fiddle that may help you debug what is going on in the different browsers.

本文标签： javascriptUnderstanding how alert() impacts browser event loopStack Overflow