在递归承诺链中取消或停止$ timeout

Question

I have a service which checks for item status every 3 seconds. If the item status is ready, then returns the status string. Otherwise, use $timeout to wait for 3 seconds and try again.

My problem is I'd like to cancel or stop the recursive timeout when user triggers some events(ex: leave the current page), but I don't know how to do that.

Service:

angular.module('app')
    .factory('ItemService', ItemService);

function ItemService($timeout, DataService) {
    var service = {
        checkStatus: checkStatus
    };

    function checkStatus() {
        return DataService.getItemStatus()
            .then(function(status){
                if (status === 'ready') {
                    return status;
                } else {
                    // the item is not ready. Check again after 3 seconds
                    return $timeout(function() {
                        return checkStatus();
                    }, 3000)
                }
            });
    }

}

Client:

angular.module('app')
    .controller('ItemCtrl', ItemCtrl);

function ItemCtrl($scope, ItemService) {
    ItemService.checkStatus()
        .then(function(status) {
            // do somethin when item is ready.
        });

    $scope.$on('destroy', function(){
        // Should stop the $timeout recursive, but don't know how..
    });
}

Answer 1

You should be able to cancel an angular timeout with

$timeout.cancel(promise)

So something like this should work:

var promise = ItemService.checkStatus();
promise.then(function(status) {
        // do somethin when item is ready.
    });

$scope.$on('destroy', function(){
    if(typeof promise.then === 'function') {
        $timeout.cancel(promise);
    }
});