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,有错误之处还请大神指出