javascript - 为什么 setTimeout(fn, 0) 有时有用？

Question

我最近遇到了一个相当讨厌的错误，其中代码正在加载 <select>通过 JavaScript 动态地。这个动态加载的<select>有一个预选值。在 IE6 中，我们已经有了修复选定 <option> 的代码。 , 因为有时 <select>的selectedIndex值将与选定的 <option> 不同步的index属性，如下:

field.selectedIndex = element.index;

但是，此代码不起作用。即使该字段的 selectedIndex设置正确，最终会选择错误的索引。但是，如果我卡住了 alert()在正确的时间声明，将选择正确的选项。考虑到这可能是某种时间问题，我尝试了一些我之前在代码中看到的随机方法:

var wrapFn = (function() {
    var myField = field;
    var myElement = element;

    return function() {
        myField.selectedIndex = myElement.index;
    }
})();
setTimeout(wrapFn, 0);

这成功了!

我已经找到了解决问题的方法，但我很不安，因为我不知道为什么这能解决我的问题。有人有官方解释吗？通过使用 setTimeout()“稍后”调用我的函数可以避免什么浏览器问题?

Answer 1

在问题中，有一个 race condition之间:

1. 浏览器尝试初始化下拉列表，准备更新其选定的索引，并且
2. 设置所选索引的代码

您的代码一直在赢得这场竞赛，并试图在浏览器准备好之前设置下拉选择，这意味着错误将会出现。

之所以存在这种竞争是因为 JavaScript 有一个 single thread of execution与页面呈现共享。实际上，运行 JavaScript 会阻止 DOM 的更新。

您的解决方法是:

setTimeout(callback, 0)

使用回调调用 setTimeout，并将零作为第二个参数将调度回调在尽可能短的延迟之后异步运行 - 大约 10 毫秒选项卡有焦点，执行的 JavaScript 线程不忙。

因此，OP 的解决方案是将所选索引的设置延迟大约 10 毫秒。这让浏览器有机会初始化 DOM，修复错误。

每个版本的 Internet Explorer 都表现出古怪的行为，这种变通方法有时是必要的。或者，它可能是 OP 代码库中的真正错误。

---

见 Philip Roberts 的演讲 "What the heck is the event loop?"以获得更详尽的解释。