尝试将具有全局变量的$ interval转换为函数

时间:2019-06-18 15:06:22

标签: javascript angularjs

我有一个代码,希望它使用不同的属性重复几次。

我正在使用AngularJS中的$ interval,但无法将这段代码转换为一个函数。在下面,我将同时发布这两个代码,不包含函数的代码以及我尝试过使用函数但给出错误的代码。

原始代码

$scope.alarm.times.armed_away.pending_time = null;
var pendingTime;
var promiseAlarmPendingTime;

$scope.alarm.times.armed_away.pending_time = entity.attributes.armed_away_pending_time;

promiseAlarmPendingTime = $interval(function(){
   if($scope.alarm.times.armed_away.pending_time >= 0) {
      $scope.alarm.times.armed_away.pending_time -= 1;
      if($scope.alarm.times.armed_away.pending_time > 10) {
         playSound('audio/alarm_pending_time_1.mp3');
      } else if($scope.alarm.times.armed_away.pending_time > 0) {
         playSound('audio/alarm_pending_time_2.mp3');
      } else if($scope.alarm.times.armed_away.pending_time == 0){
         $interval.cancel(promiseAlarmPendingTime);
      }
   } else {
      $scope.alarm.times.armed_away.pending_time = null;
      $interval.cancel(promiseAlarmPendingTime);
      promiseAlarmPendingTime = null;
   }
}, 1000);

我尝试使其与功能配合使用

promiseAlarmPendingTime = $interval($scope.fnAlarmPendingTime(
   $scope.alarm.times.armed_away.pending_time,
   promiseAlarmPendingTime), 1000);

$scope.fnAlarmPendingTime = function(pendTime, promise){
   if(pendTime >= 0) {
      pendTime -= 1;
      if(pendTime > 10) {
         playSound('audio/alarm_pending_time_1.mp3');
      } else if(pendTime > 0) {
         playSound('audio/alarm_pending_time_2.mp3');
      } else if(pendTime == 0){
         $interval.cancel(promiseAlarmPendingTime);
      }
   } else {
      pendTime = null;
      $interval.cancel(promise);
      promise = null;
   }
};

该函数重复自身1次,然后给出一个错误:

TypeError: f is not a function

我还尝试删除了函数内部的整个代码,但发生相同的错误。也许是语法问题?

1 个答案:

答案 0 :(得分:2)

您有两种选择:

1)调用一个函数,该函数调用您的函数并传递参数。
2)在您的$interval调用中传递参数。

$interval具有以下签名:$interval(function, delay, [count], [invokeApply], [parameters])。您已经知道functiondelay是什么-count(如果设置为非零正数)是间隔应运行的次数。 invokeApply会将function包装(或不包装)到$scope.$apply()中,以便您可以控制脏模型检查,这是导致视图更新的原因。最后,parameters是您要传递给函数的参数。

示例1

angular.module('app', [])
  .controller('ctrl', function($interval, $scope) {
    $scope.counter = 0;
    let promise = $interval(() => incrementCounter(promise), 1000);

    function incrementCounter(promise) {
      $scope.counter++;
      if ($scope.counter == 10) {
        $interval.cancel(promise);
      }
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  Counter: {{ counter }}
</div>

示例2

angular.module('app', [])
  .controller('ctrl', function($interval, $scope) {
    $scope.counter = 0;
    let promise = null; // promise needs to be initialized before you can pass it as a parameter using this method
    promise = $interval(incrementCounter, 1000, 0, true, promise);

    function incrementCounter() {
      $scope.counter++;
      if ($scope.counter == 10) {
        $interval.cancel(promise);
      }
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  Counter: {{ counter }}
</div>