AngularJS停止定時器
- 黄舟原創
- 2017-02-17 11:36:021441瀏覽
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>1
1
（2 ）點選開始
（3）點選停止
以上就是的內容，更多相關內容請關注PHP中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn