为什么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()?

当前回答

这是一个有老答案的老问题。我想重新审视这个问题，并回答为什么会发生这种情况，而不是为什么这种方法有用。

所以你有两个功能:

var f1 = function () {    
   setTimeout(function(){
      console.log("f1", "First function call...");
   }, 0);
};

var f2 = function () {
    console.log("f2", "Second call...");
};

然后按如下顺序调用它们f1();f2 ();看看第二个先执行。

原因如下:不可能让setTimeout的时间延迟为0毫秒。最小值由浏览器决定，不是0毫秒。历史上浏览器将这个最小值设置为10毫秒，但HTML5规范和现代浏览器将其设置为4毫秒。

如果嵌套级别大于5，并且超时时间小于4，则将timeout增加为4。

同样来自mozilla:

要在现代浏览器中实现0毫秒超时，可以使用 window.postMessage()如下所述。

附注:信息是在阅读以下文章后获取的。

2014-05-19 21:34:47

其他回答

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

2009-04-22 21:53:43

setTimeout()即使设置为0，也会在DOM元素加载之前为您争取一些时间。

看看这个:setTimeout

2009-04-22 21:52:10

浏览器有一个叫做“主线程”的进程，它负责执行一些JavaScript任务，UI更新，例如:绘制，重绘，回流等等。 JavaScript任务被排队到消息队列中，然后分派到浏览器的主线程中执行。当在主线程繁忙时生成UI更新时，任务被添加到消息队列中。

2013-02-25 21:27:03

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

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

2011-01-01 17:38:04

Javascript是单线程应用程序，因此不允许同时运行函数，因此使用事件循环来实现此目标。setTimeout(fn, 0)所做的就是在调用栈为空时将它推入任务任务。我知道这个解释很无聊，所以我建议你看一下这个视频，这将帮助你在浏览器中如何工作。看看这个视频:- https://www.youtube.com/watch?time_continue=392&v=8aGhZQkoFbQ

2018-01-22 07:27:14

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

推荐文章

最新文章

标签