JavaScript：如何在for循环中从Asyn函数返回值

Question

I got a Service as follows to return back a value:

// Service.js
var done = false;
var readyToSubmit = function(answerArr, len) {
  var threshold = 0;
  for (var i = 0; i < answerArr.length; i++) {
    var id = answerArr[i].focus + '_' + userData.uid;
    appStore.getDoc(id).then(function(doc) {
      if (doc.doneRate == 100) {
        threshold++;
        if (threshold == len) {
          done = true;
        } else {
          done = false;
        }
      }
    });
  }
  return done; // here, It always returns 'undefined'.
};

I would like to use this service in my AngularJs project, like below:

var answerArr = $scope.homework.items;
var len = answerArr.length;
$scope.$on('appChange', function(e, doc) {
  $scope.done = hwService.readyToSubmit(answerArr, len);
});

However, always without luck, although I tried call readyToSubmit(para1, para2, callback) , this kind of calling doesn't make any fortune. It really bugs me for about 4 hours. So anyone would like to do me a favor here? Many many thanks~~ :)

Answer 1

You can't use async functions like this.

You can use angulars promise to achieve this.

// Service.js
var done = false;
var defered = $q.defer() //include in service function $q
var readyToSubmit = function(answerArr, len) {
  var threshold = 0;
  for (var i = 0; i < answerArr.length; i++) {
    var id = answerArr[i].focus + '_' + userData.uid;
    appStore.getDoc(id).then(function(doc) {
      if (doc.doneRate == 100) {
        threshold++;
        if (threshold == len) {
          defered.resolve(true);
        } else {
          done = false;
        }           
      }
    });
  }
  return done; // here, It always returns 'undefined'.
};

Use a defer object to make use of the angular promise. if defered.resolve() is called, it will invoke the .then .

var answerArr = $scope.homework.items;
var len = answerArr.length;
$scope.$on('appChange', function(e, doc) {
  hwService.readyToSubmit(answerArr, len).then(function(done){
    $scope.done = done;
  });
});

Answer 2

The point is you can not return the done variable because when you want to return it, the callback function in your for loop:

appStore.getDoc(id).then(function(doc) {
    //...
})

hasn't got called yet. since as you also mentioned in your question it is a asynchronous function .

You have 2 options, first is using Angular promises which is described in another answer, but you also have one other solution which is using a callback in readyToSubmit function:

var done = false;
var readyToSubmit = function(answerArr, len, callback) {
  var threshold = 0;
  for (var i = 0; i < answerArr.length; i++) {
    var id = answerArr[i].focus + '_' + userData.uid;
    appStore.getDoc(id).then(function(doc) {
      if (doc.doneRate == 100) {
        threshold++;
        if (threshold == len) {
          callback(true);
        } else {
          callback(false);
        }
      }
    });
  }
  //no need to return anything
  //return done;
};

then to use in your angular scope:

var answerArr = $scope.homework.items;
var len = answerArr.length;
$scope.$on('appChange', function(e, doc) {
  hwService.readyToSubmit(answerArr, len, function(done){
      $scope.done = done;
  });
});

this way, the point that you have to consider is, this line of code:

$scope.done = done;

would get called more than once.