AngularJS停止定时器
来源:互联网 发布:js shift splice 编辑:程序博客网 时间:2024/06/04 19:21
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"><div ng-controller="intervalController"><button data-ng-click="startEvent()">开始</button><button data-ng-click="stopClick()">停止</button><button data-ng-click="resetEvent()">重置</button><br><div>开始数据:{{startData}}</div><br><div>结束数据:{{endData}}</div><br></div></body></html>
3、实现结果
(1)初始化
(2)点击开始
(3)点击停止
(4)点击重置
0 0
- AngularJS停止定时器
- AngularJS停止定时器$interval
- AngularJS之定时器无法停止
- 停止定时器
- angularjs定时器
- ORACLE定时器停止运行
- AngularJS之定时器(interval)
- angularjs 移除定时器
- angularjs之定时器
- C#中定时器停止问题
- AngularJS之定时器(timeout)
- AngularJS 定时器(获取当前日期)
- AngularJS之定时器(timeout)
- 定时器NSTimer的简单使用和停止
- JS定时器的使用与停止
- 滑动时NSTimer定时器停止的解决方法
- 手机灭屏,js定时器停止计算
- window.setInterval做定时器和使用window.clearInterval()停止定时器
- Leetcode 59. Spiral Matrix II (Medium) (java)
- socket学习(3)
- mysql执行外部sql文件
- STL优先队列的优先级
- 智能输入器
- AngularJS停止定时器
- 站在巨人的肩膀上--邵泓鑫
- Calendar--如何在Activity界面实时显示当前的日期
- Cocos2d-x在xcode下开发生成静态库添加到项目
- 焦距、物距与像距
- 图论定义
- 最大堆排序(性能测试)
- 2016-10-09 iOS是支持反射的 .dll是能直接用的
- python 中 *\的理解