Async foreach in javascript

你的方法在技术上是正确的，但以这种方式做并不好。请在javasript中使用promise模式实现。我建议您在 git 上使用 when.js 上可用的开源 js 来实现承诺模式 请参考以下代码

   var service = {
            fetch: function (query) {
                // return a promise from the function
                return when(["A", "B", "C"].forEach(function (name) {
                    alert(name);
                }));
            }
        };
        service.fetch("hello world").then(function () {
            alert("work has been completed");
        });

我现在只是为了学术目的而再次来到这里。现在，我建议大家首先了解 Aadit 的优雅和简洁的方法，因为这对我来说是一次很好的学习经验，因为他使用 bind 的技术，因为我不知道这一点，也不知道你可以在 setTimeout 之后放置额外的参数。

在学习了这些东西之后，我将代码简化为：

    var foreach = function(array,doSomething,onComplete) {
        var i = 0, len = array.length, completeCount = 0;
        for(;i < len; i++) {
            window.setTimeout(function() {
                doSomething(arguments[0]);
                completeCount++;
                if (completeCount === len) { 
                    onComplete(); 
                }
            },0,array[i]);
        }
    };

我认为你必须有一个"completeCount"，因为尽管 Aadit 的代码是一个很好的简洁解决方案，可以自动减少数组，但它并不是真正的异步，因为在每个方法线性完成数组后都会调用"next（）"。"completeCount"允许代码以任何顺序完成执行，我相信这就是这一点。在 Aadit 的代码中，还有修改输入数组以及需要更改函数原型的副作用，我认为这是不必要的。"提升"在他的代码中也没有实践，我认为应该这样做，因为这种风格减少了错误。

非常尊重Aadit的代码，并花时间再次回来，试图根据我从其他聪明人和Aadit那里学到的知识提出更好的解决方案。我欢迎任何批评和更正，因为我将尝试从中学习。

仅供参考：这是一种通用的延迟方法

    var deferred = function(methods,onComplete) {
        var i = 0, len = methods.length, completeCount = 0,
        partialComplete = function() {
            completeCount++;
            if (completeCount === len) {
                onComplete();
            }
        };
        for(;i < len; i++) {
            window.setTimeout(function() {
                arguments[0](partialComplete);
            },0,methods[i]);
        }
    };
    // how to call it
    deferred([
        function (complete) {
            // this could easily be ajax that calls "complete" when ready
            complete();
        },
        function (complete) {
            complete();    
        }
    ], function() {
       alert('done'); 
    });

查看异步库。它有几个不同的功能，并且得到了积极的支持。

错了，请纠正我，但根据我从您的问题中了解到的情况，我相信您想要获取一个数组，在该数组的每个成员上异步串行调用函数，然后在处理完数组的每个成员时执行回调函数。

现在要在浏览器环境中异步执行函数，我们将执行以下操作：

Function.prototype.async = function () {
    setTimeout.bind(window, this, 0).apply(window, arguments);
};
alert.async(5);
alert(6);

在上面的例子中，setTimeout函数用于异步调用给定的函数，因此我们首先看到值6，然后看到值5被警告。

接下来，为了使您的foreach函数异步，我们将执行以下操作：

function forEach(array, funct, callback) {
    if (array.length)
    funct.async(array[0], forEach.bind(null, array.slice(1), funct, callback));
    else callback.async();
}

上述解决方案不使用回避。当然，forEach函数在自身内部被引用，但它仅在异步调用的funct函数中被调用。因此，forEach 函数在 funct 函数中再次调用之前返回。

我在每个代码片段之前都包含了指向JS小提琴的链接。如果您还有其他疑问，我很乐意回答。

编辑：

如果您不喜欢修改Function （@kitgui.com） 的prototype，则可以使用此修改后的代码：

var async = Function.prototype.call.bind(function () {
    setTimeout.bind(null, this, 0).apply(null, arguments);
});
async(alert, 5);
alert(6);

由于我没有在上面的代码中引用window，因此它也可以在非浏览器环境中工作。

然后我们可以重写 forEach 函数，如下所示：

function forEach(array, funct, callback) {
    if (array.length)
    async(funct, array[0], forEach.bind(null, array.slice(1), funct, callback));
    else async(callback);
}

我们有它。无需修改Function的prototype。async的功能主体几乎相同。我们简单地使用 call.bind 为它创建了一个未绑定的包装器。您可以亲自观看现场演示。

奖金：

您可以使用上述模式创建 errback，如下所示（请参阅现场演示）：

function forEach(array, funct, callback, error) {
    if (array.length && !error)
    async(funct, array[0], forEach.bind(null, array.slice(1), funct, callback));
    else async(callback, error || null);
}

这相当于 caolan 异步库中的 forEachSeries 函数在不到 10 行代码中。

假设你想做原始计算，并且你想要它异步，这样它就不会阻塞浏览器。

我已经使用"setTimeout（Func，0）;"技巧大约一年了。这是我最近写的一些研究，解释了如何加快速度。如果您只想要答案，请跳到步骤 4。 步骤 1 2 和 3 解释推理和机制;

// In Depth Analysis of the setTimeout(Func,0) trick.
//////// setTimeout(Func,0) Step 1 ////////////
// setTimeout and setInterval impose a minimum 
// time limit of about 2 to 10 milliseconds.
  console.log("start");
  var workCounter=0;
  var WorkHard = function()
  {
    if(workCounter>=2000) {console.log("done"); return;}
    workCounter++;
    setTimeout(WorkHard,0);
  };
// this take about 9 seconds
// that works out to be about 4.5ms per iteration
// Now there is a subtle rule here that you can tweak
// This minimum is counted from the time the setTimeout was executed.
// THEREFORE:
  console.log("start");
  var workCounter=0;
  var WorkHard = function()
  {
    if(workCounter>=2000) {console.log("done"); return;}
    setTimeout(WorkHard,0);
    workCounter++;
  };
// This code is slightly faster because we register the setTimeout
// a line of code earlier. Actually, the speed difference is immesurable 
// in this case, but the concept is true. Step 2 shows a measurable example.
///////////////////////////////////////////////

//////// setTimeout(Func,0) Step 2 ////////////
// Here is a measurable example of the concept covered in Step 1.
  var StartWork = function()
  {
    console.log("start");
    var startTime = new Date();
    var workCounter=0;
    var sum=0;
    var WorkHard = function()
    {
      if(workCounter>=2000) 
      {
        var ms = (new Date()).getTime() - startTime.getTime();
        console.log("done: sum=" + sum + " time=" + ms + "ms"); 
        return;
      }
      for(var i=0; i<1500000; i++) {sum++;}
      workCounter++;
      setTimeout(WorkHard,0);
    };
    WorkHard();
  };
// This adds some difficulty to the work instead of just incrementing a number
// This prints "done: sum=3000000000 time=18809ms".
// So it took 18.8 seconds.
  var StartWork = function()
  {
    console.log("start");
    var startTime = new Date();
    var workCounter=0;
    var sum=0;
    var WorkHard = function()
    {
      if(workCounter>=2000) 
      {
        var ms = (new Date()).getTime() - startTime.getTime();
        console.log("done: sum=" + sum + " time=" + ms + "ms"); 
        return;
      }
      setTimeout(WorkHard,0);
      for(var i=0; i<1500000; i++) {sum++;}
      workCounter++;
    };
    WorkHard();
  };
// Now, as we planned, we move the setTimeout to before the difficult part
// This prints: "done: sum=3000000000 time=12680ms"
// So it took 12.6 seconds. With a little math, (18.8-12.6)/2000 = 3.1ms
// We have effectively shaved off 3.1ms of the original 4.5ms of dead time.
// Assuming some of that time may be attributed to function calls and variable 
// instantiations, we have eliminated the wait time imposed by setTimeout.
// LESSON LEARNED: If you want to use the setTimeout(Func,0) trick with high 
// performance in mind, make sure your function takes more than 4.5ms, and set 
// the next timeout at the start of your function, instead of the end.
///////////////////////////////////////////////

//////// setTimeout(Func,0) Step 3 ////////////
// The results of Step 2 are very educational, but it doesn't really tell us how to apply the
// concept to the real world.  Step 2 says "make sure your function takes more than 4.5ms".
// No one makes functions that take 4.5ms. Functions either take a few microseconds, 
// or several seconds, or several minutes. This magic 4.5ms is unattainable.
// To solve the problem, we introduce the concept of "Burn Time".
// Lets assume that you can break up your difficult function into pieces that take 
// a few milliseconds or less to complete. Then the concept of Burn Time says, 
// "crunch several of the individual pieces until we reach 4.5ms, then exit"
// Step 1 shows a function that is asyncronous, but takes 9 seconds to run. In reality
// we could have easilly incremented workCounter 2000 times in under a millisecond.
// So, duh, that should not be made asyncronous, its horrible. But what if you don't know
// how many times you need to increment the number, maybe you need to run the loop 20 times,
// maybe you need to run the loop 2 billion times.
  console.log("start");
  var startTime = new Date();
  var workCounter=0;
  for(var i=0; i<2000000000; i++) // 2 billion
  {
    workCounter++;
  }
  var ms = (new Date()).getTime() - startTime.getTime();
  console.log("done: workCounter=" + workCounter + " time=" + ms + "ms"); 
// prints: "done: workCounter=2000000000 time=7214ms"
// So it took 7.2 seconds. Can we break this up into smaller pieces? Yes.
// I know, this is a retarded example, bear with me.
  console.log("start");
  var startTime = new Date();
  var workCounter=0;
  var each = function()
  {
    workCounter++;
  };
  for(var i=0; i<20000000; i++) // 20 million
  {
    each();
  }
  var ms = (new Date()).getTime() - startTime.getTime();
  console.log("done: workCounter=" + workCounter + " time=" + ms + "ms"); 
// The easiest way is to break it up into 2 billion smaller pieces, each of which take 
// only several picoseconds to run. Ok, actually, I am reducing the number from 2 billion
// to 20 million (100x less).  Just adding a function call increases the complexity of the loop
// 100 fold. Good lesson for some other topic.
// prints: "done: workCounter=20000000 time=7648ms"
// So it took 7.6 seconds, thats a good starting point.
// Now, lets sprinkle in the async part with the burn concept
  console.log("start");
  var startTime = new Date();
  var workCounter=0;
  var index=0;
  var end = 20000000;
  var each = function()
  {
    workCounter++;
  };
  var Work = function()
  {
    var burnTimeout = new Date();
    burnTimeout.setTime(burnTimeout.getTime() + 4.5); // burnTimeout set to 4.5ms in the future
    while((new Date()) < burnTimeout)
    {
      if(index>=end) 
      {
        var ms = (new Date()).getTime() - startTime.getTime();
        console.log("done: workCounter=" + workCounter + " time=" + ms + "ms"); 
        return;
      }
      each();
      index++;
    }
    setTimeout(Work,0);
  };
// prints "done: workCounter=20000000 time=107119ms"
// Sweet Jesus, I increased my 7.6 second function to 107.1 seconds.
// But it does prevent the browser from locking up, So i guess thats a plus.
// Again, the actual objective here is just to increment workCounter, so the overhead of all
// the async garbage is huge in comparison. 
// Anyway, Lets start by taking advice from Step 2 and move the setTimeout above the hard part. 
  console.log("start");
  var startTime = new Date();
  var workCounter=0;
  var index=0;
  var end = 20000000;
  var each = function()
  {
    workCounter++;
  };
  var Work = function()
  {
    if(index>=end) {return;}
    setTimeout(Work,0);
    var burnTimeout = new Date();
    burnTimeout.setTime(burnTimeout.getTime() + 4.5); // burnTimeout set to 4.5ms in the future
    while((new Date()) < burnTimeout)
    {
      if(index>=end) 
      {
        var ms = (new Date()).getTime() - startTime.getTime();
        console.log("done: workCounter=" + workCounter + " time=" + ms + "ms"); 
        return;
      }
      each();
      index++;
    }
  };
// This means we also have to check index right away because the last iteration will have nothing to do
// prints "done: workCounter=20000000 time=52892ms"  
// So, it took 52.8 seconds. Improvement, but way slower than the native 7.6 seconds.
// The Burn Time is the number you tweak to get a nice balance between native loop speed
// and browser responsiveness. Lets change it from 4.5ms to 50ms, because we don't really need faster
// than 50ms gui response.
  console.log("start");
  var startTime = new Date();
  var workCounter=0;
  var index=0;
  var end = 20000000;
  var each = function()
  {
    workCounter++;
  };
  var Work = function()
  {
    if(index>=end) {return;}
    setTimeout(Work,0);
    var burnTimeout = new Date();
    burnTimeout.setTime(burnTimeout.getTime() + 50); // burnTimeout set to 50ms in the future
    while((new Date()) < burnTimeout)
    {
      if(index>=end) 
      {
        var ms = (new Date()).getTime() - startTime.getTime();
        console.log("done: workCounter=" + workCounter + " time=" + ms + "ms"); 
        return;
      }
      each();
      index++;
    }
  };
// prints "done: workCounter=20000000 time=52272ms"
// So it took 52.2 seconds. No real improvement here which proves that the imposed limits of setTimeout
// have been eliminated as long as the burn time is anything over 4.5ms
///////////////////////////////////////////////

//////// setTimeout(Func,0) Step 4 ////////////
// The performance numbers from Step 3 seem pretty grim, but GUI responsiveness is often worth it.
// Here is a short library that embodies these concepts and gives a descent interface.
  var WilkesAsyncBurn = function()
  {
    var Now = function() {return (new Date());};
    var CreateFutureDate = function(milliseconds)
    {
      var t = Now();
      t.setTime(t.getTime() + milliseconds);
      return t;
    };
    var For = function(start, end, eachCallback, finalCallback, msBurnTime)
    {
      var i = start;
      var Each = function()
      {
        if(i==-1) {return;} //always does one last each with nothing to do
        setTimeout(Each,0);
        var burnTimeout = CreateFutureDate(msBurnTime);
        while(Now() < burnTimeout)
        {
          if(i>=end) {i=-1; finalCallback(); return;}
          eachCallback(i);
          i++;
        }
      };
      Each();
    };
    var ForEach = function(array, eachCallback, finalCallback, msBurnTime)
    {
      var i = 0;
      var len = array.length;
      var Each = function()
      {
        if(i==-1) {return;}
        setTimeout(Each,0);
        var burnTimeout = CreateFutureDate(msBurnTime);
        while(Now() < burnTimeout)
        {
          if(i>=len) {i=-1; finalCallback(array); return;}
          eachCallback(i, array[i]);
          i++;
        }
      };
      Each();
    };
    var pub = {};
    pub.For = For;          //eachCallback(index); finalCallback();
    pub.ForEach = ForEach;  //eachCallback(index,value); finalCallback(array);
    WilkesAsyncBurn = pub;
  };
///////////////////////////////////////////////

//////// setTimeout(Func,0) Step 5 ////////////
// Here is an examples of how to use the library from Step 4.
  WilkesAsyncBurn(); // Init the library
  console.log("start");
  var startTime = new Date();
  var workCounter=0;
  var FuncEach = function()
  {
    if(workCounter%1000==0)
    {
      var s = "<div></div>";
      var div = jQuery("*[class~=r1]");
      div.append(s);
    }
    workCounter++;
  };
  var FuncFinal = function()
  {
    var ms = (new Date()).getTime() - startTime.getTime();
    console.log("done: workCounter=" + workCounter + " time=" + ms + "ms"); 
  };
  WilkesAsyncBurn.For(0,2000000,FuncEach,FuncFinal,50);
// prints: "done: workCounter=20000000 time=149303ms"
// Also appends a few thousand divs to the html page, about 20 at a time.
// The browser is responsive the entire time, mission accomplished
// LESSON LEARNED: If your code pieces are super tiny, like incrementing a number, or walking through 
// an array summing the numbers, then just putting it in an "each" function is going to kill you. 
// You can still use the concept here, but your "each" function should also have a for loop in it 
// where you burn a few hundred items manually.  
///////////////////////////////////////////////

我发现本教程准确地解释了我需要什么。我希望这也能帮助其他人。http://nodetuts.com/tutorials/19-asynchronous-iteration-patterns.html#video