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?

sitepoint.com/javascript-large-data-processing

Naveen Kumar Alone
– Naveen Kumar Alone

2013-07-25 14:01:58 +00:00
Commented Jul 25, 2013 at 14:01 — Naveen Kumar Alone
– Naveen Kumar Alone, Commented Jul 25, 2013 at 14:01
are you talking about a foreach loop?

Trae Moore
– Trae Moore

2013-07-25 14:03:09 +00:00
Commented Jul 25, 2013 at 14:03 — Trae Moore
– Trae Moore, Commented Jul 25, 2013 at 14:03
arr.forEach(func(this)); would this work?

Trae Moore
– Trae Moore

2013-07-25 14:12:16 +00:00
Commented Jul 25, 2013 at 14:12 — Trae Moore
– Trae Moore, Commented Jul 25, 2013 at 14:12
@TraeMoore: No, definitely not. Did you try it?

Bergi
– Bergi

2013-07-25 14:15:12 +00:00
Commented Jul 25, 2013 at 14:15 — Bergi
– Bergi, Commented Jul 25, 2013 at 14:15

Herms · Accepted Answer · 2013-07-25 14:54:30Z

3

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.

edited Jul 25, 2013 at 14:54

answered Jul 25, 2013 at 14:01

Herms

39.2k13 gold badges80 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Thor Jacobsen Over a year ago

I need to start thinking faster, this is the exact same solution I got to! :)

Zeta Over a year ago

Won't array.slice create a new array? This would lead to O(n^2) memory consumption.

Herms Over a year ago

Good catch. For small arrays it should be fine. If dealing with large amounts of data then yes, it could be made better. Edited to provide that option as well.

Trae Moore Over a year ago

arr.forEach(func(this)); would this work? sorry, wrong comment section

Bergi Over a year ago

The new function doesn't work; it will forever invoke func with the same index.

|

Zeta · Accepted Answer · 2013-07-25 14:08:07Z

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

Bergi · Accepted Answer · 2013-07-25 14:10:08Z

0

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

answered Jul 25, 2013 at 14:10

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

The Alpha · Accepted Answer · 2013-07-25 15:48:51Z

0

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.

edited Jul 25, 2013 at 15:48

answered Jul 25, 2013 at 14:13

The Alpha

147k30 gold badges294 silver badges313 bronze badges

3 Comments

Bergi Over a year ago

What would you map to? Makes no sense here.

The Alpha Over a year ago

Sorry, I didn't get it, isn't it looping the array and calling the function ?

Herms Over a year ago

map doesn't help here. He doesn't want to call func() on each element in the array immediately. He wants to call it on the first element, and pass to that a function that calls it on the second, etc.

Maksim Yefremov · Accepted Answer · 2013-07-26 04:47:15Z

0

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

edited Jul 26, 2013 at 4:47

answered Jul 25, 2013 at 14:52

Maksim Yefremov

14.3k28 gold badges124 silver badges171 bronze badges

Comments

Yoshi · Accepted Answer · 2013-09-13 14:46:03Z

0

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

edited Sep 13, 2013 at 14:46

answered Jul 25, 2013 at 14:18

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Comments

verbanicm · Accepted Answer · 2013-07-25 13:59:34Z

-1

You can loop through the array

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

answered Jul 25, 2013 at 13:59

verbanicm

2,5461 gold badge16 silver badges9 bronze badges

1 Comment

Herms Over a year ago

That won't do them in sequence like he wants. It would start them all immediately, instead of starting the next after the previous was done.

Collectives™ on Stack Overflow

array and asynchronous function callback

7 Answers 7

6 Comments

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related