AngularJS停止定时器$interval

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

1、问题背景

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


2、实现源码

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <Metacharset="UTF-8">
  5. <title>AngularJS停止定时器</title>
  6. <scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  7. <script>
  8. varapp=angular.module("intervalApp",[]);
  9. app.controller("intervalController",["$scope","$interval",function($scope,$interval){
  10. $scope.startData=100;
  11. $scope.endData=1000;
  12. varstopEvent;
  13. $scope.startEvent=function(){
  14. if(angular.isDefined(stopEvent))return;
  15. stopEvent=$interval(function(){
  16. if($scope.startData>50&&$scope.endData>500)
  17. {
  18. $scope.startData=$scope.startData-5;
  19. $scope.endData=$scope.endData-50;
  20. }
  21. else
  22. {
  23. $scope.stopClick();
  24. },1000)
  25. };
  26. $scope.stopClick=function(){
  27. if(angular.isDefined(stopEvent))
  28. $interval.cancel(stopEvent);
  29. stopEvent=undefined;
  30. }
  31. $scope.resetEvent=function(){
  32. };
  33. $scope.$on("$destory",function(){
  34. $scope.stopClick();
  35. });
  36. }]);
  37. </script>
  38. </head>
  39. <bodyng-app="intervalApp">
  40. <divng-controller="intervalController">
  41. <buttondata-ng-click="startEvent()">开始</button>
  42. <buttondata-ng-click="stopClick()">停止</button>
  43. <buttondata-ng-click="resetEvent()">重置</button><br>
  44. <div>开始数据:{{startData}}</div><br>
  45. <div>结束数据:{{endData}}</div><br>
  46. </div>
  47. </body>
  48. </html>

3、实现结果

(1)初始化


(2)点击开始

(3)点击停止

(4)点击重置

转自:http://www.jb51.cc/article/p-pcdrepng-wk.html

原文链接:https://www.f2er.com/angularjs/147019.html

猜你在找的Angularjs相关文章