數組和異步函數回調

Question

我有一個異步功能：

var func = function  (arg, next) {
    var milliseconds = 1000;
    setTimeout(function(){
        console.log (arg);
        next()
    }   , milliseconds);
}

和數組：

var arr = new Array();
arr.push (0);
arr.push (1);

console.log(arr);

我想對數組arr每個項目使用func ：

func(arr[0], function(){
    func(arr[1], function(){
        console.log("finish");
    })
})

確定數組由2個元素組成，但是如果我得到1000個元素的數組，如何對arr每個項目使用func ？

如何循環執行？

Answer 1

var arrayFunc = function(array) {
  if (array.length > 0) {
    func(array[0], function() { arrayFunc(array.slice(1)); });
  }
}

這將使用數組中的第一個元素運行您的函數，然后讓延續函數使用數組的其余部分。 因此，當它運行時，它將運行數組中的新第一個元素。

編輯：這是一個修改后的版本，不會在周圍復制該數組：

var arrayFunc = function(array, index) {
  if (index < array.length) {
    func(array[index], function() {
      var newI = index + 1;
      arrayFunc(array, newI);
    });
  }
}

並以索引0首次調用它。

Answer 2

盡管您的方法有效，但如果調用次數不確定，則無法使用該方法，因為異步命令中的每個鏈都是硬編碼的。

如果要在數組上應用相同的功能，則最好提供一個函數，該函數創建一個內部函數並將超時應用於其內部函數：

var asyncArraySequence = function (array, callback, done){
  var timeout = 1000, sequencer, index = 0;

  // done is optional, but can be used if you want to have something
  // that should be called after everything has been done
  if(done === null || typeof done === "undefined")
    done = function(){}

  // set up the sequencer - it's similar to your `func`
  sequencer = function(){
    if(index === array.length) {
      return done();      
    } else {
      callback(array[index]);
      index = index + 1;
      setTimeout(sequencer, timeout);
    }
  };
  setTimeout(sequencer, timeout);
}

var arr = [1,2,3];
asyncArraySequence(arr, function(val){console.log(val);});

Answer 3

一個簡單的異步循環：

function each(arr, iter, callback) {
    var i = 0;
    function step() {
        if (i < arr.length)
            iter(arr[i++], step);
        else if (typeof callback == "function")
            callback();
    }
    step();
}

現在使用

each(arr, func);

Answer 4

您可以嘗試arr.map

var func = function  (arg, i) {
    var milliseconds = 1000;
    setTimeout(function(){
        console.log (arg);
    }, milliseconds*i);
}

var arr = new Array();
arr.push (0);
arr.push (1);

arr.map(func);

適用於舊版瀏覽器的 演示和Polyfill 。

更新：我以為OP希望循環遍歷數組並為每個數組項調用回調函數，但我可能是錯的，因此與其刪除答案，我只是將其保留在此處，也許對其他人有所幫助未來。 這不能回答當前的問題。

Answer 5

一個簡單的解決方案是：

var fn = arr.reduceRight(function (a, b) {
  return func.bind(null, b, a);
}, function() {
  console.log('finish');
});

fn();

演示： http ： //jsbin.com/isuwac/2/

---

或者，如果可以更改func的參數順序以接收next回調作為第一個參數，則它可能很簡單：

['a', 'b', 'c'].reduceRight(func.bind.bind(func, null), function (){
  console.log('finish');
})();

演示： http : //jsbin.com/ucUZUBe/1/edit?js，控制台

Answer 6

謝謝，@赫姆斯。 工作解決方案：

var arrayFunc = function(array) {
  if (array.length > 0) {
    func(array[0], function() {arrayFunc(array.slice(1)); });
  }
  else
  {
    console.log("finish");
  }
}
arrayFunc(arr);

Answer 7

您可以遍歷數組

for(var i = 0; i < arr.length; i++){
    func(arr[i], function(){...});
}