为什么 JS 模态消息框会在 setTimeout() 上暂停倒计时?

Why do JS modal message boxes pause countdown on setTimeout()?(为什么 JS 模态消息框会在 setTimeout() 上暂停倒计时?)

问题描述

当 alert 之类的模态对话框窗口打开时，我遇到了 JS setTimeout 的意外行为，我想知道它背后的原因.

setTimeout(function(){
    //alert A
    alert("10 seconds have passed for the first setTimeout")
}, 10000);
setTimeout(function(){
    //alert B
    alert("Wait for 15 seconds and press OK");
},1000);

我怀疑为什么 IE 和 Chrome 都会暂停挂起的计时器，直到 alert 被解除，并且火狐没有.我相信这只是因为在解释 W3C 的规范方面有一定的自由度代码>警报:

I doubt there is a definitive answer on why both IE and Chrome put a pause on pending timers until alert has been dismissed, and Firefox doesn't. I believe it's just because there is certain freedom in interpreting the W3C's specs for alert:

alert(message) 方法在调用时必须执行以下步骤:

The alert(message) method, when invoked, must run the following steps:

1. 如果事件循环的终止嵌套级别不为零，则可选中止这些步骤.

1. If the event loop's termination nesting level is non-zero, optionally abort these steps.

释放存储互斥锁.

向用户显示给定的消息.

Show the given message to the user.

(可选)在等待用户确认时暂停消息.

Optionally, pause while waiting for for the user to acknowledge the message.

第 4 步(暂停)进一步解释 这里:

Step 4 (the pause) is further explained here:

本规范中的一些算法，由于历史原因，要求用户代理在运行任务时暂停，直到出现条件目标达成.这意味着运行以下步骤:

Some of the algorithms in this specification, for historical reasons, require the user agent to pause while running a task until a condition goal is met. This means running the following steps:

1. 如果任何异步运行的算法正在等待稳定状态，然后运行他们的同步部分，然后继续运行他们的异步算法.(参见 事件循环 处理模型详情见上文定义.)

1. If any asynchronously-running algorithms are awaiting a stable state, then run their synchronous section and then resume running their asynchronous algorithm. (See the event loop processing model definition above for details.)

如有必要，更新任何文档的呈现或用户界面或浏览上下文以反映当前状态.

If necessary, update the rendering or user interface of any Document or browsing context to reflect the current state.

等到满足条件目标.当用户代理暂停时任务，相应的事件循环不得运行进一步的任务，以及任何当前运行任务中的脚本必须阻塞.用户代理应该然而，在暂停时仍然响应用户输入，尽管在容量减少，因为事件循环不会做任何事情.

Wait until the condition goal is met. While a user agent has a paused task, the corresponding event loop must not run further tasks, and any script in the currently running task must block. User agents should remain responsive to user input while paused, however, albeit in a reduced capacity since the event loop will not be doing anything.

因此，无论如何，事件循环都会暂停.当警报仍然可见和模态时，不会调用较长超时的回调.如果不是这样，可能会出现各种令人讨厌的事情，比如多个警报叠加在一起.

So, the event loop gets suspended in any case. The callback of the longer timeout doesn't get invoked while the alert is still visible and modal. Had it not been this way, all kinds of nasties might be made possible, like multiple alerts on top of each other.

现在，您能否从上述规范中判断计时器倒计时是否应该在警报的生命周期内暂停，还是应该在警报消失后立即触发?我不能，我什至不确定哪种行为更合乎逻辑.

Now, can you tell from the above specs if the timer countdown should be suspended for the lifetime of the alert, or should rather be fired as soon as the alert has gone? I can't, and I'm not even sure which behavior would be more logical.

我可以肯定的是，除了调试目的之外，您不应该将 JavaScript 警报用于其他任何目的.警报确实允许暂停脚本执行(而 XHR 等一些异步操作正在后台进行)，但它们对用户非常不友好.正确的方法是采用异步代码，使用 Promise，可能还有 ES6 generators/yeild(如果你喜欢线性代码风格).

What I'm sure about is that you shouldn't be using JavaScript alerts for anything else but debugging purposes. Alerts do allow to suspend script execution (while some asynchronous operation like XHR is taking place in the background), but they're quite unfriendly to the user. The right approach would be embrace asynchronous code, using promises and, possibly, ES6 generators/yeild (if you're after the linear code style).

以下问题高度相关，此处讨论了 alert 的一些替代方案:

The following question is highly related and some alternatives to alert are discussed there:

• 防止 js alert() 暂停计时器

这篇关于为什么 JS 模态消息框会在 setTimeout() 上暂停倒计时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！