array and asynchronous function callback

Question

I got async function:

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

And array:

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

console.log(arr);

I want to use func for every item of my array arr :

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

Ok for array consisted of 2 elements, but if I got array of 1000 elements how to use func for every item in arr ?

How to do it in cycle?

Answer 1

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

This will run your function with the first element in the array, and then have the continuation function take the rest of the array. So when it runs it will run the new first element in the array.

EDIT: here's a modified version that doesn't copy the array around:

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

And just call it the first time with an index of 0.

Answer 2

While your approach is valid, it's not possible to use it if you have an uncertain number of calls, since every chain in your async command is hardcoded.

If you want to apply the same functionality on an array, it's best to provide a function that creates an internal function and applies the timeout on it's inner function:

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

A simple asynchronous loop:

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();
}

Now use

each(arr, func);

Answer 4

You may try 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);

Demo and Polyfill for older browsers .

Update : I thought the OP wants to loop through the array and call the callback function with each array item but I was probably wrong, so instead of deleting the answer I'm just keeping it here, maybe it would be helpful for someone else in future. This doesn't answer the current question.

Answer 5

A simple solution would be:

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

fn();

demo: http://jsbin.com/isuwac/2/

---

or if the order of func 's parameters could be changed to receive the next callback as the first parameter, it could be as simple as:

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

demo: http://jsbin.com/ucUZUBe/1/edit?js,console

Answer 6

Thanx, @Herms. Working solution:

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

Answer 7

You can loop through the array

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