了解alert（）如何影响浏览器事件循环 [英] Understanding how alert() impacts browser event loop
问题描述
我正在考虑将 alert（）添加到我们的Javascript实用程序assert函数中。
I'm considering adding an alert() to our Javascript utility assert function.
我们是一个沉重的ajax应用程序，以及我们的框架（Ext）通过使用 setInterval 轮询ajax响应而不是等待readystate == 4来实现ajax的方式，将导致执行所有ajax回调在 setInterval 堆栈上下文中-并且抛出异常/断言通常会以静默方式失败。
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.
低层级如何 alert（）是否影响浏览器事件循环？根据定义，消息框必须允许win32事件循环运行（以响应mbox按钮）。这是否意味着其他浏览器事件（例如，由我们的框架生成的将来的 setInterval s，调整大小事件等）将会触发？这会给我造成麻烦吗？
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：您可以使用Firefox2和Firefox3.5来查看我所谈论的区别。
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显示1-3-2。 Firefox2 [1] 显示1-2& 3（2和3同时堆叠）。我们也可以使用从ActiveX启动的win32 mbox在IE8中复制1-2& 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.
谁能指出我特定的低层资源来解释此行为，此处的预期行为以及在低层上到底发生了什么，包括行为为何在整个过程中发生了变化Firefox版本？
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] ，您可以在Spoon.net上复制它，但现在无法使用。我只是在使用Firefox 2.0.0.20的VM中复制了它。
[1] you can replicate this on Spoon.net which I can't get working right now. I just reproduced it in a VM with Firefox 2.0.0.20.
推荐答案
首先，javascript中的计时器不是很精确。小于30ms的间隔可能被认为是相同的，并且实现方式也有所不同。不要依赖任何隐式顺序。
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.
alert（）始终会停止事件循环。如果事件或计时器在警报期间触发，则事件循环恢复（警报框关闭）后，它们将被排队并被调用。
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).
以该示例为例：
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)
有两种可能的结果：
-
您将在5秒钟内关闭警报框。随后的两个计时器将被设置并按指定的间隔触发。您可以看到事件循环已停止，因为无论等待关闭警报有多长时间，侦听都将始终用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.
您需要超过5秒钟才能关闭警报。第一个间隔（bgColor）将过去，因此将立即执行，然后设置并调用两个计时器。
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.
对于间隔，虽然事件循环停止，但它也停止时间，因此在这种情况下：
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)
无论您关闭警报有多长时间，下一个数字始终为6- setInterval 不会多次触发。
Regardless of how long you take to close the alert, the next number will always be 6 - the setInterval won't fire multiple times.
这篇关于了解alert（）如何影响浏览器事件循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
