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

我最近遇到了一个相当严重的错误，其中代码通过JavaScript动态加载<select>。这个动态加载的<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()?

当前回答

这样做的一个原因是将代码的执行推迟到单独的后续事件循环。在响应某种类型的浏览器事件(例如鼠标单击)时，有时有必要仅在处理完当前事件后执行操作。setTimeout()工具是最简单的方法。

编辑现在是2015年，我应该注意到还有requestAnimationFrame()，这并不完全相同，但它足够接近setTimeout(fn, 0)，值得一提。

2011-01-01 17:38:04

其他回答

看看John Resig关于JavaScript计时器如何工作的文章。当您设置超时时，它实际上会将异步代码排队，直到引擎执行当前调用堆栈为止。

2010-12-06 21:38:30

关于执行循环和在其他代码完成之前呈现DOM的答案是正确的。JavaScript中的零秒超时有助于使代码成为伪多线程，尽管它不是。

我想补充的是，JavaScript中跨浏览器/跨平台零秒超时的最佳值实际上是20毫秒而不是0(零)，因为由于AMD芯片的时钟限制，许多移动浏览器无法注册小于20毫秒的超时。

此外，不涉及DOM操作的长时间运行的进程现在应该发送给Web Workers，因为它们提供了JavaScript的真正多线程执行。

2013-03-13 23:29:55

编辑现在是2015年，我应该注意到还有requestAnimationFrame()，这并不完全相同，但它足够接近setTimeout(fn, 0)，值得一提。

2011-01-01 17:38:04

通过调用setTimeout，您可以给页面时间来响应用户正在做的任何事情。这对于在页面加载期间运行的函数特别有用。

2009-04-22 21:53:43

在问题中，存在以下之间的竞争条件:

浏览器尝试初始化下拉列表，准备更新其选择的索引设置所选索引的代码

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

这种竞争的存在是因为JavaScript有一个与页面呈现共享的执行线程。实际上，运行JavaScript会阻塞DOM的更新。

你的解决方案是:

setTimeout(callback, 0)

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

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

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

请参阅Philip Roberts的“到底什么是事件循环?”以获得更详细的解释。

2009-04-23 00:14:17

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

推荐文章

最新文章

标签