29、AngularJs中$timeout与$interval实际使用场景分析

阅读() @2018-10-29 18:16:10

AngularJs中$timeout与$interval实际使用场景分析,类似于原生js中的setTimeout和setInterval,测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$timeout与$interval实际使用场景分析</title>
	<style type="text/css">
		.ng-cloak{display:none;}
	</style>
</head>
<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-cloak">
	{{num}}
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctr', ['$scope', '$timeout', '$interval', function($scope, $timeout, $interval){
		$scope.num = 1;
		/*var time = setTimeout(function(){
			$scope.num += 1;
			$scope.$apply();
		},2000);*/

		/*var time = $timeout(function(){
			$scope.num += 1;
		},1000);
		$timeout.cancel(time);*/

		var time = $interval(function(){
			$scope.num += 1;
			if($scope.num>=3){
				$interval.cancel(time);
			}
		},1000);



	}])
</script>

为了方便,在AngularJS构建的应用当中可以大量的使用它自带的服务。比如以上ctr控制器中的第一个延时器,如果不是用$timeout的话,想要实现同样的效果,就必须加上$scope.$apply()这段代码,而使用AngularJs自带的服务显然不需要!

微信二维码