为什么setTimeout（fn，0）有时有用？

阳光LEY2020-03-10

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

Sam神乐番长2020/03/10 10:29:28

Javascript是单线程应用程序，因此不允许同时运行功能，因此要使用此事件循环。因此，正是setTimeout（fn，0）所做的事情使它被塞入任务请求中，该任务在您的调用堆栈为空时执行。我知道这个解释很无聊，所以我建议您看这段视频，这将帮助您在浏览器中进行工作。观看以下视频：-https : //www.youtube.com/watch?time_continue=392&v=8aGhZQkoFbQ

Mandy小卤蛋凯2020/03/10 10:29:28

关于执行循环和在其他一些代码完成之前呈现DOM的答案是正确的。JavaScript中的零秒超时有助于使代码成为伪多线程的，即使事实并非如此。

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

此外，不涉及DOM操作的长期运行的进程应立即发送给Web Worker，因为它们提供了真正的JavaScript多线程执行。

L前端2020/03/10 10:29:28

问题是您试图对不存在的元素执行Javascript操作。元素尚未加载，并setTimeout()通过以下方式为元素加载提供了更多时间：

setTimeout()导致事件是异步的，因此在所有同步代码之后执行该事件，从而使您的元素有更多的加载时间。异步回调（如in setTimeout()内的回调）放置在事件队列中，并在同步代码堆栈为空之后由事件循环放入堆栈中。
ms的值0作为函数中的第二个参数setTimeout()通常会稍高一些（4-10ms，具体取决于浏览器）。执行setTimeout()回调所需的时间稍长，这是由事件循环的“滴答声”量引起的（滴答声将堆栈中的回调推入堆栈，如果堆栈为空）。由于性能和电池寿命原因，事件循环中的滴答声数量限制为每秒少于 1000次的特定数量。

泡芙达蒙2020/03/10 10:29:27

这样做的另一件事是将函数调用推到堆栈的底部，以防递归调用函数时防止堆栈溢出。这具有while循环的效果，但可以让JavaScript引擎触发其他异步计时器。

JinJin卡卡西小胖2020/03/10 10:29:27

setTimeout有用的其他一些情况：

您希望将长时间运行的循环或计算分解为较小的组件，以使浏览器看起来不会“冻结”或说“页面上的脚本忙”。

您希望在单击时禁用表单提交按钮，但是如果在onClick处理程序中禁用该按钮，则不会提交表单。时间为零的setTimeout可以解决问题，它可以使事件结束，可以开始提交表单，然后可以禁用按钮。

Itachi猪猪Green2020/03/10 10:29:27

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

乐米亚2020/03/10 10:29:27

由于要传递的持续时间为0，所以我想是为了setTimeout从执行流程中删除传递给的代码。因此，如果该函数可能需要一段时间，则不会阻止后续代码的执行。

番长GO2020/03/10 10:29:27

这是一个带有旧答案的旧问题。我想重新看待这个问题，并回答为什么会发生这种情况，而不是为什么这样做很有用。

因此，您有两个功能：

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

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

然后按以下顺序调用它们，f1(); f2();只是看到第二个首先执行。

And here is why: it is not possible to have setTimeout with a time delay of 0 milliseconds. The Minimum value is determined by the browser and it is not 0 milliseconds. Historically browsers sets this minimum to 10 milliseconds, but the HTML5 specs and modern browsers have it set at 4 milliseconds.