1、问题背景
设置一个定时器,给定两个变量startdata和enddata,计时开始后分别减去5和50;单击停止暂停定时器,重置后数据恢复到原来的数据。
2、实现源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>angularjs停止定时器</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("intervalapp",[]);
app.controller("intervalcontroller",["$scope","$interval",function($scope,$interval){
$scope.startdata = 100;
$scope.enddata = 1000;
var stopevent;
$scope.startevent = function(){
if(angular.isdefined(stopevent)) return;
stopevent = $interval(function(){
if($scope.startdata > 50 && $scope.enddata > 500)
{
$scope.startdata = $scope.startdata - 5;
$scope.enddata = $scope.enddata - 50;
}
else
{
$scope.stopclick();
}
},1000)
};
$scope.stopclick = function(){
if(angular.isdefined(stopevent))
{
$interval.cancel(stopevent);
stopevent = undefined;
}
};
$scope.resetevent = function(){
$scope.startdata = 100;
$scope.enddata = 1000;
};
$scope.$on("$destory",function(){
$scope.stopclick();
});
}]);
</script>
</head>
<body ng-app="intervalapp">
<p ng-controller="intervalcontroller">
<button data-ng-click="startevent()">开始</button>
<button data-ng-click="stopclick()">停止</button>
<button data-ng-click="resetevent()">重置</button><br>
<p>开始数据:{{startdata}}</p><br>
<p>结束数据:{{enddata}}</p><br>
</p>
</body>
</html>
3、实现结果
(1)初始化
(2)点击开始
(3)点击停止
(4)点击重置
以上就是的内容。