在 AngularJS 中创建一个简单的计时器

Posted 2023-02-22

【中文标题】在 AngularJS 中创建一个简单的计时器

【英文标题】：Creating a simple timer in AngularJS

【发布时间】：2013-09-09 22:22:53

【问题描述】：

我有一个输入字段，我想显示一个简单的计数器（每秒更新一次）。

<input class="form-control input-lg" type="text" placeholder="00" ng-model="ss">

每个开始/停止按钮在控制器中都有关联的ng-click 方法

查看

<button ng-click="start()">Start</button>

我可以在控制器功能中完成计数器吗？

$scope.start = function() 

;

我试过这样的

$scope.start = function() 
    if($scope.counting === true) return false;
    $scope.counting = true;
    $scope.counter = setInterval($scope.updateCount, 1000);
;

$scope.updateCount = function() 
    $scope.ss++;

但是当调用 start 函数时，该值不会持续更新输入 ng-model='ss'。它只是将其设置为 1，然后间隔似乎不会继续更新。

或者我需要创建服务吗？如果是这样，有人可以指出我需要如何设置该服务以便将更新的计数值返回给控制器的正确方向。

如往常一样感谢任何帮助。

【参考方案1】：

您需要在setInterval 回调中使用$scope.$apply()，以便更新值。

$scope.updateCount = function() 
    $scope.ss++;
    $scope.$apply();

通常建议使用$timeout 而不是setInterval（因为它不需要$apply），这是一个很好的方法：https://***.com/a/14238039/1266600。

【讨论】：

非常感谢 - $apply 正是我所需要的。该函数最初确实使用了 $timeout，但我尝试 setInterval 认为该问题可能与 $timeout 有关。感谢您的澄清和链接。在您看来，您认为这值得提供服务吗？

除非您将它用作多个控制器中的可重用组件，否则创建服务可能是矫枉过正:)

除非有充分的理由不使用$timeout，否则最好只使用$timeout。

@BrianGenisio 我同意，答案已经指出了这一点。我的评论解释说我只是尝试 setInterval 以防更新问题与 $timeout 服务有关。