JavaScript中setTimeout返回值类型和意义说明:
1、setTimeout :暂停指定的毫秒数后执行指定的代码,返回值是id标识,这个id的意义就是通过clearTimeout来清理暂停执行函数。
setTimeout函数的ID标识(number类型),每次调用setTimeout函数都会产生一个唯一的ID,可以通过clearTimeout函数(此函数的参数接收一个setTimeout返回的ID)暂停setTimeout函数还未执行的代码
<html> <head> <script type="text/javascript"> var c=0 var t function timedCount()//开始计时 { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount(){//停止计时 clearTimeout(t) } </script> </head> <body> <form> <input type="button" value="开始计时!" onClick="timedCount()"> <input type="button" value="停止计时!" onClick="stopCount()"> <input type="text" id="txt"> </form> <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p> </body> </html>
AngularJS中$timeout返回值类型和意义说明:
和javascript中原生的setTimeout()以及setInterval()函数不同,AngularJS中的$timeOut()函数会返回一个promise。和其他的promise一样,你可以绑定$timeOut的resolved和rejected时间。然而更重要的是,你可以通过将这个promise传递给$timeOut.cancel()方法来取消掉潜在的定时器。
timeout函数的返回值是一个promise,当到达设置的超时时间时,这个承诺将被解决,并执行timeout函数。
需要取消timeout,需要调用$timeout.cancel(promise);
使用: $timeout(fn,[delay],[invokeApply]);
fn:一个将被延迟执行的函数。
delay:延迟的时间(毫秒)。
invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply。
$scope.timer = $timeout( function(){ $scope.backup("1"); }, 10000);
方法:
cancel(promise);
取消与承诺相关联的任务。这个的结果是,承诺将被以摒弃方式来解决。
promise:$timeout函数返回的承诺。
$timeout.cancel($scope.timer)
其实两者之间还有一个很重要的区别,首先我们下面来看例子:
例子1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("timeApp",[]); app.controller("timeController",function($scope,$timeout){ $scope.message ="Waiting 2000ms for update"; setTimeout(function () { $scope.message ="Timeout!"; }, 2000); }); </script> </head> <body> <div ng-app="timeApp" ng-controller="timeController"> <label>{{message}}</label> </div> </body> </html>
显示的结果:2000ms后,页面并没有更新为:Timeout!,数据的更新没有被angular JS觉察到。
例子2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("timeApp",[]); app.controller("timeController",function($scope,$timeout){ $scope.message ="Waiting 2000ms for update"; setTimeout(function () { $scope.$apply(function () { $scope.message ="Timeout!"; }); }, 2000); }); </script> </head> <body> <div ng-app="timeApp" ng-controller="timeController"> <label>{{message}}</label> </div> </body> </html>
结果显示:
用$scope.$apply()包起来。页面上先会显示:Waiting 2000ms for update,等待2秒后内容会被更改为:Timeout! 。显然数据的更新被angular JS觉察到了。
例子3:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("timeApp",[]); app.controller("timeController",function($scope,$timeout){ $scope.message ="Waiting 2000ms for update"; $timeout(function () { $scope.message ="Timeout!"; }, 2000); }); </script> </head> <body> <div ng-app="timeApp" ng-controller="timeController"> <label>{{message}}</label> </div> </body> </html>
结果显示:
使用angularjs自带的$timeout()函数,页面上先会显示:Waiting 2000ms for update,等待2秒后内容会被更改为:Timeout! 。显然数据的更新被angular JS觉察到了。
所以从上面三个例子来看,我们可以很直观的看出:JavaScript 的setTimeout 和Angular中的$timeout的區別。Angular中的$timeout比JavaScript 的setTimeout多了一个$apply方法用于传播Model的变化。
后面我会接着学习
- Scope提供$watch方法监视Model的变化。
- Scope提供$apply方法传播Model的变化。
这两者之间的区别。