Day06 setTimeout / setInterval / $timeout / $ interval

1、setTimeout的用法

<script src="angular-1.6.8/angular.js"></script>
<body ng-app="myApp" ng-controller="myController">
	<input type="button" ng-click="touch()" value="三秒后显示水利"/>
    {{message}}
    
    <script>
    var app = angular.module("myApp",[]);
	app.controller("myController",function($scope){
		$scope.touch = function(){
			setTimeout(function(){
				$scope.$apply(function(){
					$scope.message = "水利";
					});
				},3000);
			}
		});
    </script>
</body>

2、setInterval的用法

<script src="angular-1.6.8/angular.js"></script>
<body ng-app="myApp" ng-controller="myController">
	<input type="button" ng-click="touch()" value="三秒后显示水利"/>
    {{message}}
    
    <script>
    var app = angular.module("myApp",[]);
	app.controller("myController",function($scope){
		$scope.touch = function(){
			var count = 0;
			setInterval(function(){
				$scope.$apply(function(){
					$scope.message = "水利"+count++;
					});
				},3000);
			
			}
		});
    </script>
</body>

3、$timeout的用法

话不多说，先贴一段代码

<script src="angular-1.6.8/angular.js"></script>

<body ng-app="myApp" ng-controller="myContr">
	<input type="button" ng-click="touch()" value="显示"/>
    {{gx}}
    <script>
    var app = angular.module("myApp",[]);
	app.controller("myContr",function($scope,$timeout){
		$scope.touch = function(){
			$timeout(function(){
				
				$scope.gx = "水利";
				
				},3000);
			}
		});
    </script>
</body>

4.$interval的使用

话不多说，贴代码

<script src="angular-1.6.8/angular.js"></script>
<body ng-app="myApp" ng-controller="myContr">
{{date}}
<script>
var app = angular.module("myApp",[]);
app.controller("myContr",function($scope,$interval){
	$interval(function(){
		$scope.date = new Date();
		},1000);
	
	});

</script>
</body>

注意：我因为要在里边用$timeout，所以就将$timeout先传进去：

app.controller("控制器名称"，function($scope,$timeout){});

angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行.

如果需要取消一个timeout,调用$timeout.cancel(promise)方法.

用法:

$timeout(fn, [delay], [invokeApply]);

fn: 回调函数(必填)

delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以后就执行.比如当页面被渲染完成后.

invokeApply: 布尔值.是否需要进行脏值检测(非必填),不填默认为false,如果设置为true,则fn回调会被包在$scope.$apply()中执行

返回值: 返回一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve.resolve的值就是fn回调函数的返回值

初学angular js，有错误之处还请大神指出

Day06 setTimeout / setInterval / $timeout / $ interval

猜你喜欢