使用Angular计时器满足条件后取消$ interval

时间:2016-08-25 23:16:04

标签: javascript angularjs setinterval

我很难让我的$ interval服务取消。我不完全确定我失踪的是什么。

我已经草拟了一个倒数计数属性的计数器。 $ scope.sessionCounter

           $scope.sessionCounter = 5;

            var intializeSessionCounter = function () {
                $scope.sessionTime();
                $interval(function () {
                    $scope.sessionCounter--;
                    if ($scope.sessionCounter > 1) {
                        console.log('timedown', $scope.sessionCounter);
                    }
                    else {
                        $scope.showSessionTimeoutWarningModal();
                        $scope.stop();


                    }
                }, 1000);
            }
            intializeSessionCounter();

以上所有内容都正常,因为它通过了if语句。当$ scope.sessionCounter转到 1 时,我点击了else语句。弹出我要打开的模态。然后点击 $ scope.stop 并读取 $ interval.cancel(null)。但是,由于 $ interval 继续遇到负数,因此没有任何内容取消,我的模态会继续重新打开。

            $scope.stop = function () {
                $interval.cancel(null);
            }

1 个答案:

答案 0 :(得分:1)

您必须将$ interval provider绑定到某个变量。

试试这个:

$scope.sessionCounter = 5;

var intializeSessionCounter = function () {
      $scope.sessionTime();
      $scope.interval = $interval(function () {
          $scope.sessionCounter--;
          if ($scope.sessionCounter > 1) {
              console.log('timedown', $scope.sessionCounter);
          }
          else {
              $scope.showSessionTimeoutWarningModal();
              $scope.stop();
          }
      }, 1000);
}
intializeSessionCounter();

... 
$scope.stop = function () {
    if( $scope.interval !== undefined){
        $interval.cancel($scope.interval);
        $scope.interval = undefined;
    }        

}