AngularJS停止定时器$interval

发布时间：2020-12-17 09:11:06 所属栏目：安全来源：网络整理

导读：1、问题背景设置一个定时器，给定两个变量startData和endData，计时开始后分别减去5和50；单击停止暂停定时器，重置后数据恢复到原来的数据。 2、实现源码 [html] view plain copy print ? !DOCTYPEhtml html head meta charset = "UTF-8" title AngularJS

1、问题背景

设置一个定时器，给定两个变量startData和endData，计时开始后分别减去5和50；单击停止暂停定时器，重置后数据恢复到原来的数据。

2、实现源码

[html] 
   view plain 
   copy 
   
print 
   ? 
  
 <!DOCTYPEhtml>
 <html>
 <head>
 <metacharset="UTF-8">
 <title>AngularJS停止定时器</title>
 <scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 <script>
 varapp=angular.module("intervalApp",[]);
 app.controller("intervalController",["$scope","$interval",function($scope,$interval){
 $scope.startData=100;
 $scope.endData=1000;
 
 varstopEvent;
 $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.$on("$destory",function(){
 $scope.stopClick();
 });
 }]);
 </script>
 </head>
 <bodyng-app="intervalApp">
 <divng-controller="intervalController">
 <buttondata-ng-click="startEvent()">开始</button>
 <buttondata-ng-click="stopClick()">停止</button>
 <buttondata-ng-click="resetEvent()">重置</button><br>
 <div>开始数据：{{startData}}</div><br>
 <div>结束数据：{{endData}}</div><br>
 </div>
 </body>
 </html>

3、实现结果

（1）初始化

（2）点击开始

（3）点击停止

（4）点击重置

转自：http://www.52php.cn/article/p-pcdrepng-wk.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!