我如何修改我的功能以能够取消控制器中任何位置的间隔
[英]How can I modify my function to be able to cancel the interval from anywhere in the controller
问题描述
I am trying to create a countdown and I want to be able to cancel the interval not only when reach 0 but with clicking of a button as well.How can I modify my function to be able to cancel the interval from anywhere in the controller. 
我正在尝试创建一个倒数计时器，我不仅希望能够在达到0时取消间隔，而且还可以单击按钮来取消间隔。如何修改我的功能以能够从控制器中的任何位置取消间隔。
function countDown(total) {
total = total * 60;
var interval = $interval(function () {
var minutes = Math.floor(total / 60);
var seconds = total - minutes * 60;
if (minutes < 1)
{
minutes = '0:';
}
else
{
minutes = minutes + ':';
}
if (seconds < 10)
{
seconds = '0' + seconds;
}
self.remainingTime = "Remaining time: " + minutes + seconds;
total--;
if(minutes === '0:' && seconds === '00')
{
$interval.cancel(interval);
}
}, 1000);
} }
2 个解决方案
解决方案1
1 已采纳 2017-04-13 16:09:28
As suggested by other users, you should make interval global in the controller. 如其他用户所建议，您应该在控制器中将interval全局。 Then on the other functions you want to cancel the interval you can call it safely. 然后，在其他要取消interval功能上，可以安全地调用它。
Take a look at the below sample: 看下面的示例：
angular.module('app', []) .controller('ctrl', function($interval) { var self = this; var interval; self.wizard = { startInterval: startInterval, cancelInterval: cancelInterval }; startInterval(); return self.wizard; function startInterval() { countDown(24); } function cancelInterval() { $interval.cancel(interval); } function countDown(total) { cancelInterval(); total = total * 60; interval = $interval(function() { var minutes = Math.floor(total / 60); var seconds = total - minutes * 60; if (minutes < 1) { minutes = '0:'; } else { minutes = minutes + ':'; } if (seconds < 10) { seconds = '0' + seconds; } self.wizard.remainingTime = "Remaining time: " + minutes + seconds; total--; if (minutes === '0:' && seconds === '00') { $interval.cancel(interval); } }, 1000); } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <span ng-app="app" ng-controller="ctrl as ctrl"> <span ng-bind="ctrl.remainingTime"> </span> <br/> <a href="" ng-click="ctrl.cancelInterval()"> Cancel Interval </a> <br/> <a href="" ng-click="ctrl.startInterval()"> Start Interval </a> </span>
解决方案2
1 2017-04-13 16:40:59
I created an example using self instead of $scope like you are in your snippet above. 我创建了一个使用self而不是$ scope的示例，就像您在上面的代码段中一样。 As others mentioned moving the interval var to the global scope fixes this. 正如其他人提到的，将间隔var移到全局范围可以解决此问题。 I also added a stop and start function to test the issue you mentioned in the example above. 我还添加了停止和启动功能，以测试您在以上示例中提到的问题。
UPDATED - I added some code to the stop interval to reset the interval to undefined. 更新-我向停止间隔添加了一些代码以将间隔重置为未定义。 I found an example of this usage on Angular's site so it might be worth a try to see if it fixes your other issue. 我在Angular网站上找到了这种用法的示例，因此值得一试，看看它是否可以解决您的其他问题。
var app = angular.module('app', []);
app.controller('BaseController', function($interval) {
var self = this;
var interval;
function countDown(total) {
total = total * 60;
interval = $interval(function() {
var minutes = Math.floor(total / 60);
var seconds = total - minutes * 60;
if (minutes < 1) {
minutes = '0:';
} else {
minutes = minutes + ':';
}
if (seconds < 10) {
seconds = '0' + seconds;
}
self.remainingTime = "Remaining time: " + minutes + seconds;
total--;
if (minutes === '0:' && seconds === '00') {
$interval.cancel(interval);
}
}, 1000);
}
self.stopInterval = function(){
if (angular.isDefined(interval)) {
$interval.cancel(interval);
interval = undefined;
}
}
self.startInterval = function(){
countDown(10);
}
});
Then in the html I added a button to start and stop the interval like so: 然后在html中，我添加了一个按钮来启动和停止间隔，如下所示：
<body ng-app="app">
<div ng-controller="BaseController as baseCtrl">
{{ baseCtrl.remainingTime }}
<div>
<button ng-click="baseCtrl.startInterval()">Start Countdown</button>
<button ng-click="baseCtrl.stopInterval()">Stop Countdown</button>
</div>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.