分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了AngularJS停止定时器$interval，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1、问题背景

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

2、实现源码

[html]view plaincopy 
   
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>