如何正确等待同步循环中触发的所有异步函数返回值-JS

Question

I have an async operation in a loop which fetches a result and pushes to an array like this:

 arr = [] while (some_limit_reaches) { async_operation(arg, function(err, data) { if (!err) arr.push(data) }) } // now arr is not completely filled until all async // operations are finished in the loop above 

the problem is that array is not completely filled until all async operations are done, how can I have a fully filled array after loop is over without using setTimeout?

Answer 1

You're trying to make a an asynchronous operation synchronous. You need to check if your desired state is true in your asynchronous callback. Try something like this.

while (some_limit_reaches) {
  async_operation(arg, function(err, data) {
  if (!err)
    arr.push(data);
    if(check_if_the_array_is_full){
      //Call some function that continues your operation
    }
  })
}

This way your processing won't continue until all the array is full.

Answer 2

This solution is a little bit verbose, but respects the separation of tasks. Its schema is similar to kriskowal's q.all .

var arr = [], limit = 10, i=0, terminated_operations = 0;

while (i < limit) {
  async_operation(arg, function(err, data) {
  if (!err) {
    arr.push(data);
    operationTerminated(arr);
  }
  });
}

function operationTerminated(data) {
  terminated_operations++;
  if( terminated_operations === limit - 1) {
    doStuff(data);
    terminated_operations = 0;
  }
}

function doStuff(data) {
  console.log('all data returned', data);
}

The first snippet represents the core logic. The second function is only a trigger of the action declared in the third one.

Edit:

In order to answer at the original question in the title

How can I make sure that an async operation does not keep array in my code empty?

I recommend to return data=undefined in case of async_operation failure, so you can accept also [] as valid return value and keep higher control in core logic. This way you can rewrite the loop as:

while (i < limit) {
  async_operation(arg, function(err, data) {
  if(err) {
    console.error('error occurred', err);
    break;
  }
  if(data) {
    arr.push(data);
    operationTerminated(arr);
  }
  });
}