角度计时器指令不起作用答案

【问题标题】：Angular Timer directive not working角度计时器指令不起作用
【发布时间】：2015-12-12 17:00:22
【问题描述】：

我想要一个 1 分钟的计时器，它应该在达到 1 分钟后立即停止，然后调用一个函数。我为此使用angular-timer 指令。

我在html中使用的代码是

<timer end-time="60000">
    {{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
</timer>

我在属性“结束时间”中提供结束时间为 60000 毫秒（1 分钟）。但它不起作用。当结束时间值为 '1451628000000' 时，它可以工作。我哪里错了？还可以帮助我了解如何在计时器结束时调用函数。

提前致谢。

【问题讨论】：

6000 毫秒是 6 秒，而不是 1 分钟。
@Amir 我的错误。但也有 6 秒，它不工作

标签： angularjs timer angular-timer

【解决方案1】：

end-time 参数以毫秒为单位获取时间戳。您的 60000 被视为时间戳。所以它已经停止了。

你可以做的是计算现在的时间戳，然后再增加 60000 个进行调整。

在您的控制器中：

$scope.endTime = (new Date()).getTime()+60*1000;

在视图中：

<timer end-time="{{endTime}}">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>

我不确定您需要以哪种格式显示该计时器，但根据您的要求，这可以。

要在特定时间段后运行某个功能，只需在控制器中使用$timeout 服务即可。注入$timeout，像JS中的setTimeout函数一样使用。

$timeout(function () {
    console.log('this will run after 1 minutes');
}, 60*1000);

有关更多信息，请查看 $timeouts documentation。

【讨论】：

【解决方案2】：

您也可以按如下方式使用倒计时。

倒计时

<timer interval="1000" countdown="100">{{countdown}}</timer>

将从 100 开始倒计时，直到通过每秒滴答一次到达 0

此标记将仅以分钟和秒为单位显示倒计时时间。此属性也可以应用于常规时钟计时器。

<timer countdown="10041" max-time-unit="'minute'" interval="1000">
     {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
</timer>

一个倒数计时器，一旦到达回调就会更新一个值

<timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()">
    {{seconds}} second{{secondsS}}
</timer>

【讨论】：

【解决方案3】：

你的错误很简单，而且很容易改正。 JavaScript 总是以毫秒为单位使用时间，因此 6000 等于 6 秒。如果您尝试这样做，它应该可以工作：

<timer end-time="60000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>

【讨论】：

【解决方案4】：

按照 Angular-Timer 文档 here，您应该结合使用间隔、倒计时和完成回调来实现您的用例。

countdown - 从这个数字开始倒计时到 0

interval - 屏幕更新的时间间隔。因此，如果您使用间隔为 1000，它将每秒刷新一次（大约）

finish-callback - 倒计时完成后调用函数。

<timer countdown="60" interval="1000" 
       finish-callback="myFinishCallback()">
   {{seconds}} second{{secondsS}}
</timer>

【讨论】：

【解决方案5】：

与其在 html 标记中使用计时器（它是一个属性）不如在 $timeout(callAtTimeout, 60000); 之类的 angularjs 中使用，然后当您可以调用方法 callAtTimeOut() 时，它可以让您的工作变得简单。如果你不知道请求的 ajax 调用发生的确切时间，你可以添加一个手表

【讨论】：