一尘不染

JavaScript为什么setTimeout(fn,0)有时有用?

javascript

我最近遇到了一个令人讨厌的错误,该错误中的代码是<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()


阅读 369

收藏
2020-04-22

共1个答案

一尘不染

在问题中,存在以下竞争条件:

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

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

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

您的解决方法是:

setTimeout(callback, 0)

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

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

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


2020-04-22