AngularJS中具有时间延迟的循环函数答案

【问题标题】：Looping function with time delay in AngularJSAngularJS中具有时间延迟的循环函数
【发布时间】：2014-03-12 23:12:11
【问题描述】：

所以我在 AngularJS 中创建了一个简单的倒计时函数，这意味着倒计时到输入中设置的时间。问题是我无法循环 $scope.countdown 函数。所以它只会倒计时一次（如果我把 $timeout($scope.countdown(), 1000); 放进去 - 它会完全中断。）我只希望它每秒循环一次，直到它达到 0。

这是我的控制器：

function countdownController($scope) {

  $scope.hours = 2;
  $scope.minutes = 30;

  $scope.countdown = function(){
    if($scope.minutes == 0 && $scope.hours == 0){
        alert('end!');
        return;
    }
    else{
        if($scope.minutes == 0){
            $scope.minutes = 59;
            $scope.hours--;
        }
        else{
            $scope.minutes--;
        }

    }
    $timeout($scope.countdown(), 1000); //if I remove this - the numbers display - this actually breaks that.
  }

  $scope.countdown();
}

【问题讨论】：

我想你想传递函数而不是执行函数 $timeout($scope.countdown, 1000);
@MattPileggi 你能告诉我把它放在应用程序的什么地方吗？我认为这就是我所缺少的。谢谢！
你有它在那里你放评论删除它。只需更改该行，使其不调用 $scope.countdown 而是将其作为对象传递。
@MattPileggi 我对语法以及如何将其作为对象传递感到困惑。我这样说吗？ $timeout(1000){$scope.countdown()}; 我确定那是错误的，但会向您展示我迷路的地方。谢谢！

标签： angularjs loops

【解决方案1】：

你要找的是arguments.callee：

$scope.countdown = function(){
    if($scope.minutes == 0 && $scope.hours == 0){
        alert('end!');
        return;
    }
    else{
        if($scope.minutes == 0){
            $scope.minutes = 59;
            $scope.hours--;
        }
        else{
            $scope.minutes--;
        }

    }
    $timeout(arguments.callee, 1000);
}

或者更建议alternative：

function countdownController($scope, $timeout) {
    $scope.hours = 0;
    $scope.minutes = 45;
    $scope.countdown = function myhandler() {
        console.log('call');
        if ($scope.minutes == 0 && $scope.hours == 0) {
            console.log('end!');
            return;
        } else {
            if ($scope.minutes == 0) {
                $scope.minutes = 59;
                $scope.hours--;
            } else {
                $scope.minutes--;
            }

        }
        $timeout(myhandler, 1000);
    }
}

JsFiddle Example

注意：正如 cmets 中提到的，不要忘记将 $timeout 注入到您的控制器中。

【讨论】：

谢谢你，但出于某种原因$timeout(myhandler, 1000); 破坏了应用程序。在 $timeout 中调用它 - 而不是在顶部函数的命名。没关系。
“破坏应用程序”究竟是什么意思？
它对我有用，更新为jsfiddle example。
啊！我没有在 $scope 的 MyCtrl 函数中包含 $timeout。现在效果很好。谢谢！您能否更新您的答案以准确包含您在 JSFiddle 中的内容，以便我可以将其标记为正确？谢谢！
@itamar 更新了超时注入

【解决方案2】：

您必须将一个函数传递给 $timeout 服务。不是函数的结果。试试这个：

$timeout($scope.countdown, 1000);

【讨论】：

但是在哪里呢？正如你所看到的，我在 $scope.countodwn 函数的末尾已经有了它。