cari

Rumah >hujung hadapan web >tutorial js >AngularJS停止定时器

AngularJS停止定时器

黄舟
黄舟asal
2017-02-17 11:36:021466semak imbas

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>



3、实现结果


（1）初始化

    1133.png

（2）点击开始

   1134.png

（3）点击停止

    1135.png

（4）点击重置

     1136.png


 以上就是的内容，更多相关内容请关注PHP中文网（www.php.cn）！ 


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Java虚拟机学习 - 垃圾收集算法Artikel seterusnya：ionic之样式button

Artikel berkaitan

Lihat lagi