Question

考虑以下HTML：

<html>
    <head></head>
    <body>
        <input type="text" onblur="window.setTimeout('document.title += 2;', 0);" />
        <input type="button" onclick="document.title += 1" />
    </body>
</html>

[Demo with 0 delay，100ms delay，150ms delay]

以下步骤：

用户输入输入（焦点）。
用户点击按钮。

现在，事件将按以下顺序发生：

输入文字模糊事件。
按钮点击事件。

在我得到的所有可访问的浏览器上测试：

document.title = '21' //Expected behavior

但是！在生产浏览器（Windows XP + IE 7）上，我得到：

document.title = '12' //Unexpected behavior

我也尝试在我的本地机器（IE 10）上以IE 7模式模拟它，无法重现它。

这显然是我遇到的问题的简化示例。否则我可以简单地摆脱setTimeout。

在实际场景中，setTimeout调用实际上是由第三方脚本库（ASP.NET Dev Express组件）进行的。

除了这个问题的实际解决方案（我认为我可以处理）之外，可以对此行为应用什么解释？

更新

使用表达式new Date().getTime()来获取浏览器执行的每个步骤的时间。它发生如下：

1387369361417 //document.title += 1
1387369361433 //document.title += 2

Answer 1

两种可能性：

您的点击（mousedown + mouseup）在IE7的最短超时时间之前完成。
mousedown状态是阻止脚本。事件必须等到其他脚本和用户交互完成才能触发。鉴于IE中脚本-UI奇怪/可怕的历史，我敢打赌mousedown“开始用户交互”，mouesup“结束用户交互”。在IE7中加载它：
```
<input type="text" onblur="window.setTimeout('output(2));', 0); output(3);" />
<input type="button" onclick="output(1);" />
```
http://jsfiddle.net/sMcE3/

...在您对文本字段进行焦点（）后，单击该按钮真正慢似。我猜你会看到312。（而不是任何一半体面的浏览器会显示的321。）

setTimeout - 奇怪的行为

1 个答案: