JavaScript为什么setTimeout（fn，0）有时有用？

Question

我最近遇到了一个令人讨厌的错误，该错误中的代码是<select>通过JavaScript动态加载的。动态加载的<select>具有预先选择的值。在IE6中，我们已经有代码来修复selected
<option>，因为有时<select>的selectedIndex值可能与selected
<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

在问题中，存在以下竞争条件：

1. 浏览器尝试初始化下拉列表，准备对其选定的索引进行更新，以及
2. 您的代码来设置选定的索引

您的代码始终在这场比赛中取胜，并在浏览器就绪之前尝试设置下拉菜单，这意味着该错误将出现。

之所以存在这种竞争，是因为JavaScript具有与页面渲染共享的单个执行线程。实际上，运行JavaScript会阻止DOM的更新。

您的解决方法是：

setTimeout(callback, 0)

调用setTimeout一个回调，以及零作为第二个参数将安排回调运行 异步 ，最短的延迟之后-
这将是10毫秒左右，当标签具有焦点和执行JavaScript的线程不是忙。

因此，OP的解决方案是将选定索引的设置延迟大约10ms。这为浏览器提供了初始化DOM的机会，从而修复了该错误。

Internet Explorer的每个版本都表现出古怪的行为，因此有时需要这种解决方法。另外，它可能是OP代码库中的真正错误。