如何使用$ q做出递归承诺

Question

let's say I have this rule:

var count = 0;
function isCountFifty() {
  count++;
  return 50 === count;
}

I want to perform isCountFifty() 50 times and each time put a $timeout 0 before the next time I run this method again until it reaches 50 and resolves the promise.

I'm trying to achieve it using angular $q

This is the general look:

var defer = $q.defer();
 defer.promise.then(resolveWhenFifty())
              .then(function () { ... something to do after count reaches 50 ...});
defer.resolve();

I'm trying to figure out what should be here:

function resolveWhenFifty () {
  return function () {
    var defer = $q.defer();
    if (isCountFifty()) {
      defer.resolve();
    } else {
      $timeout(function () {
        ... ? WHAT SHOULD BE THE RECURSION HERE ? ...
      }
    }
    return defer.promise;
  }
}

I've tried several ways but I keep getting lost on how to make this recursive function that returns the right promises with right resolves, and how do I chain all these promises together.

Answer 1

I've managed to make it work. I made a demo on plunkr.

https://plnkr.co/edit/MQS6n9qKOfGMxYwMQ8H3?p=preview

I should have been more clear that the isCountFifty() is just an example for a condition function that will iterate again and again until resolved (with a max number of timeouts).

and I'm attaching the main concept below:

  function isCountFifty() {
    count++;
    return 50 === count;
  }

  function delay(time) {
    return function() {
      return $timeout(angular.noop, time);
    }
  }

  function recursion(defer) {
    if (isCountFifty()) {
      defer.resolve();
    } else {
      var newDefer = $q.defer();
      newDefer.promise.then(delay(50)).then(function() {
        recursion(defer);
      });
      newDefer.resolve();
    }
  }

  var defer = $q.defer();

  recursion(defer);

  defer.promise.then(function() {
    console.log('yay! if I see this message it means I made 50 timeouts of 50 ms each');
    return defer.promise;
  });

I have a clue that this code can be more efficient but it does what I want.

Answer 2

The code can be re-factored to avoid using $q.defer .

angular.module('myApp', []).controller('myController', function($scope, $q, $timeout) {
  var _this = this;
  var vm = $scope;
  vm.recursions = 0;
  vm.isResolved = false;

  var time = 200;

  function waitForClass(count) {
      if (count>0) { 
        vm.recursions++;
        return $timeout(function(){return waitForClass(count-1)},time);
      } else {
        return $q.when(0);
      }
  }
  waitForClass(50).then(function() {
    vm.isResolved = true;
    return 0;
  });
});

The $timeout service returns promises and those promises can be chained .

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. ¹

The DEMO on PLNKR .

Answer 3

I think this is what you're looking for. Check out working CodePen .

You'll get a console output like this:

• 1
• "in timeout"
• 2
• "in timeout"
• 3
• "in timeout"
• ... etc ...
• 49
• "in timeout"
• 50
• "in timeout"

• "done"

    var self = this; this.isCountFifty = function(count) { console.log(count); return 50 === count; } var promises = []; for (var i = 0; i < 51; i++) promises.push({ count: i }); // execute each promise synchronously var myFunc = function() { return promises.reduce(function(promise, item) { return promise.then(function() { return $q.when( $timeout(function() { console.log('in timeout'); },500), self.isCountFifty(item.count)); }); }, $q.when()); }; myFunc().then(function() { console.log('done'); });