Array and asynchronous function callback

Question

I got an asynchronous function:

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

And an array:

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

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

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

Ok for the array consisted of two elements, but if I got an array of 1000 elements, how to use func for each element in arr ?

How to do it in a loop?

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 continue with the rest of the array. Therefore, when it starts, it will start 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 name it for the first time with index 0.

Answer 2

As long as your approach is valid, it cannot be used if you have an indefinite number of calls, since each chain in your async command is hard-coded.

If you want to apply the same functionality in an array, it is best to provide a function that creates an internal function and applies a timeout on its internal 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 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

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 can 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 wanted to iterate over the array and call the callback function with each element of the array, but I was probably wrong, so instead of deleting the answer, I just keep it here, maybe it would be useful for anyone something else in the future. This does not answer the current question.

Answer 5

A simple solution:

 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 the func parameters can be changed to get the next callback as the first parameter, it can 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 scroll an array

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