Der AngularJS-Timer kann nicht gestoppt werden-js-Tutorial-php.cn

Der AngularJS-Timer kann nicht gestoppt werden

黄舟

Freigeben： 2017-02-18 13:46:12

Original

1174 Leute haben es durchsucht

1. Problemhintergrund

Nachdem AngularJS den Timer eingestellt hat, klicken Sie erneut auf die Schaltfläche, um den Timer auszulösen. Zu diesem Zeitpunkt wird Folgendes angezeigt: Der vorherige Timer wurde nicht aktiviert gestoppt und der nächste Timer wurde nicht erneut gestartet, was dazu führt, dass mehrere Timer gleichzeitig laufen.

2. Problemquellcode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之定时器无法停止</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("btnApp",[]);
			app.controller("btnCon",function($scope,$interval){
				$scope.count = 0;
				$scope.getDayTime = function(){
					var date = new Date();
					var year = date.getFullYear();
					var month = date.getMonth()+1;
					var day = date.getDate();
					var hour = date.getHours();
					var minute = date.getMinutes();
					var second = date.getSeconds();
					var thisTime = year+"-"+(month<10?"0"+month:month)+"-"+(day<10?"0"+day:day)+" "+(hour<10?"0"+hour:hour)+":"+(minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second);
					
					return thisTime;
				};
				$scope.dayTime = $scope.getDayTime();
				$scope.queryData = function(){
					var timer = $interval(function(){  
	                    $scope.count++;  
	                    console.log($scope.count);
	                },4000);
	                
	                $scope.$on("destroy",function(){
					   $interval.cancel($scope.timer);
					}); 
				};
			});
		</script>
	</head>
	<body ng-app="btnApp">
		<p ng-controller="btnCon">
			<button ng-click="queryData();">查询</button>
			<p>
				<label>{{count}}</label>
			</p>
		</p>
	</body>
</html>

Nach dem Login kopieren

3. Fragenergebnisse

4. Lösungsquellcode

5. Lösungsergebnis

Das Obige ist der Inhalt, den der Timer von AngularJS nicht stoppen kann. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!