JavaScript为什么setTimeout(fn,0)有时有用?
我最近遇到了一个令人讨厌的错误,该错误中的代码是<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()
?
回答:
在问题中,存在以下竞争条件:
- 浏览器尝试初始化下拉列表,准备对其选定的索引进行更新,以及
- 您的代码来设置选定的索引
您的代码始终在这场比赛中取胜,并在浏览器就绪之前尝试设置下拉菜单,这意味着该错误将出现。
之所以存在这种竞争,是因为JavaScript具有与页面渲染共享的单个执行线程。实际上,运行JavaScript会阻止DOM的更新。
您的解决方法是:
setTimeout(callback, 0)
调用setTimeout
一个回调,以及零作为第二个参数将安排回调运行 ,最短的延迟之后-
这将是10毫秒左右,当标签具有焦点和执行JavaScript的线程不是忙。
因此,OP的解决方案是将选定索引的设置延迟大约10ms。这为浏览器提供了初始化DOM的机会,从而修复了该错误。
Internet Explorer的每个版本都表现出古怪的行为,因此有时需要这种解决方法。另外,它可能是OP代码库中的真正错误。
以上是 JavaScript为什么setTimeout(fn,0)有时有用? 的全部内容, 来源链接: utcz.com/qa/402819.html