我最近遇到了一个令人讨厌的错误,该错误中的代码是<select>通过JavaScript动态加载的。动态加载的<select>具有预先选择的值。在IE6中,我们已经有代码来修复selected <option>,因为有时<select>的selectedIndex值可能与selected <option>的index属性不同步,如下所示:
<select>
<option>
selectedIndex
index
field.selectedIndex = element.index;
但是,此代码无法正常工作。即使selectedIndex正确设置了字段,最终也会选择错误的索引。但是,如果我alert()在正确的时间插入一条语句,则会选择正确的选项。考虑到这可能是某种时序问题,我尝试了一些以前在代码中看到的随机现象:
alert()
var wrapFn = (function() { var myField = field; var myElement = element; return function() { myField.selectedIndex = myElement.index; } })(); setTimeout(wrapFn, 0);
这有效!
我已经为我的问题找到了解决方案,但是我不知道自己到底为什么能解决我的问题,对此我感到不安。有人有官方解释吗?通过使用调用函数“稍后”可以避免出现什么浏览器问题setTimeout()?
setTimeout()
在问题中,存在以下竞争条件:
您的代码始终在这场比赛中取胜,并在浏览器就绪之前尝试设置下拉菜单,这意味着该错误将出现。
之所以存在这种竞争,是因为JavaScript具有与页面渲染共享的单个执行线程。实际上,运行JavaScript会阻止DOM的更新。
您的解决方法是:
setTimeout(callback, 0)
调用setTimeout一个回调,以及零作为第二个参数将安排回调运行 异步 ,最短的延迟之后- 这将是10毫秒左右,当标签具有焦点和执行JavaScript的线程不是忙。
setTimeout
因此,OP的解决方案是将选定索引的设置延迟大约10ms。这为浏览器提供了初始化DOM的机会,从而修复了该错误。
Internet Explorer的每个版本都表现出古怪的行为,因此有时需要这种解决方法。另外,它可能是OP代码库中的真正错误。