javascript - Javascript setTimeout 0 延迟问题

Question

我注意到一个奇怪的行为：如果我有一系列任务并希望推迟它们的执行，那么我可以为每个任务使用一个延迟为 0 的 setTimeout。（见http://javascript.info/tutorial/events-and-timing-depth#the-settimeout-func-0-trick）

一切正常：任务排队并尽快执行。

但是......如果各种setTimeout的调用非常接近，那么我发现有时（很少发生！）没有以正确的顺序执行。为什么？

Answer 1

没有人承诺他们会以“正确”的顺序被解雇（具有相同超时的任务将按照它们设置的超时顺序执行）。setTimeout仅保证：

• 每个超时只执行一次（除非页面在此期间死掉）
• 每个超时都不会早于它应该执行的时间执行。

没有关于执行顺序的消息。事实上，即使实现者试图保持顺序（即使作为副作用），也很可能没有足够的时间分辨率来为所有任务提供唯一的排序顺序，以及二进制堆（这里很可能会用到）不保留相等键的插入顺序）。

如果你想保留你的延迟任务的顺序，你应该只在前一个任务完成时才将一个入队。

这应该有效：

var defer = (function(){
  //wrapped in IIFE to provide a scope for deferreds and wrap
  var running = false;
  var deferreds = [];
  function wrap(func){
    return function(){
      func();
      var next = deferreds.shift();
      if(next){
        setTimeout(wrap(next),0);
      }else{
        running = false;
      }
    }
  }
  return function(func){
    if(running){
      deferreds.push(func);
    }else{
      setTimeout(wrap(func),0);
      running = true;
    }
  }
})()

演示：http: //jsfiddle.net/x2QuB/1/

Answer 2

您可以考虑使用 jquery deferreds（或一些其他的 deferreds 实现），它可以非常优雅地处理这种模式。

需要注意的重要一点是，延迟完成的回调按照它们添加的顺序执行。

 var createCountFn  = function(val){  
    return function(){ 
        alert(val)
    };
}

 // tasks 
var f1 = createCountFn(1),
    f2 = createCountFn('2nd'),
    f3 = createCountFn(3);

 var dfd = $.Deferred();
 dfd.done(f1).done(f2).done(f3);

 dfd.resolve(); 

演示

Answer 3

HTML5 草案规范声明 setTimeout 方法可以异步运行（这意味着可能不会保留回调的执行顺序），这可能是您的浏览器正在执行的操作。

setTimeout() 方法必须运行以下步骤：

...

6. 返回句柄，然后继续异步运行该算法。

7. 如果方法上下文是一个 Window 对象，则等到与方法上下文相关联的 Document 完全处于活动状态，再等待超时毫秒（不一定是连续的）。

在任何情况下，都可以通过执行类似的操作来解决此问题：

function inOrderTimeout(/* func1[, func2, func3, ...funcN], timeout */)
{   var timer; // for timeout later
    var args = arguments; // allow parent function arguments to be accessed by nested functions
    var numToRun = args.length - 1; // number of functions passed
    if (numToRun < 1) return; // damm, nothing to run
    var currentFunc = 0; // index counter
    var timeout = args[numToRun]; // timeout should be straight after the last function argument
    (function caller(func, timeout) // name so that recursion is possible
    {   if (currentFunc > numToRun - 1)
        {   // last one, let's finish off
            clearTimeout(timer);
            return;
        }
        timer = setTimeout(function () 
        {   func(); // calls the current function
            ++currentFunc; // sets the next function to be called
            caller(args[currentFunc], timeout);
        }, Math.floor(timeout));
    }(args[currentFunc], timeout)); // pass in the timeout and the first function to run
}