说说Angular中的$timeOut定时器
非常不幸的一点是，人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的、无须在意的函数。但是，如果你忘记了$timeOut()的回调函数将会造成非常不好的影响，你可能会因此遇到代码莫名其妙的出现问题，或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形。管理好你的$timeOut定时器的小技巧就是在$destory事件中将它们取消。
和javascript中原生的setTimeout()以及setInterval()函数不同，AngularJS中的$timeOut()函数会返回一个promise。和其他的promise一样，你可以绑定$timeOut的resolved和rejected时间。然而更重要的是，你可以通过将这个promise传递给$timeOut.cancel()方法来取消掉潜在的定时器。
在一个AngularJS应用中，这一点非常的重要，因为定时器可以结束执行那些不再与应用状态和用户界面相关的代码。最佳情形中，这些过程都会悄悄的发生；在不好的情况下，它会引起不可预测的行为并导致很差的用户体验。为了让应用顺畅的运行，你应该总是把握好你的$timeOut定时器；你需要在相应的控制器和指令接收到$destory事件时调用$timeOut.cancel()方法。
为了更加清楚的说明这点，下面的这个例子将会有一些DOM元素通过ngSwitch/ngSwitchWhen指令来创建或销毁。注意到当$destory事件被触发时(在这里的例子中是位于指令中)，我们将取消当前的定时器：
<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">
<head>
<meta charset="utf-8" />
<title>
Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS
</title>
</head>
<body>
<h1>
Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS
</h1>
<p>
<a href="#" ng-click="toggle()">Toggle Section</a>
</p>
<div ng-switch="section">
<p ng-switch-when="happy" bn-directive>
Oh sweet!
</p>
<p ng-switch-when="sad" bn-directive>
Oh noes!
</p>
</div>
<!-- Load jQuery and AngularJS. -->
<script
type="text/javascript"
src="../../vendor/jquery/jquery-2.0.3.min.js">
</script>
<script
type="text/javascript"
src="../../vendor/angularjs/angular-1.0.7.min.js">
</script>
<script type="text/javascript">
//为我们的demo创建一个应用模块
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// 定义控制器
app.controller(
"DemoController",
function( $scope ) {
$scope.section = "happy";
//在toggle函数中改变section的值，以此在标记中显示/隐藏不同的部分
$scope.toggle = function() {
if ( $scope.section === "happy" ) {
$scope.section = "sad";
} else {
$scope.section = "happy";
}
};
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
//定义指令
app.directive(
"bnDirective",
function( $timeout ) {
//将用户界面的事件绑定到$scope上
function link( $scope, element, attributes ) {
//当timeout被定义时，它返回一个promise对象
var timer = $timeout(
function() {
console.log( "Timeout executed", Date.now() );
},
2000
);
//将resolve/reject处理函数绑定到timer promise上以确保我们的cancel方法能正常运行
timer.then(
function() {
console.log( "Timer resolved!", Date.now() );
},
function() {
console.log( "Timer rejected!", Date.now() );
}
);
//当DOM元素从页面中被移除时，AngularJS将会在scope中触发$destory事件。这让我们可以有机会来cancel任何潜在的定时器
$scope.$on(
"$destroy",
function( event ) {
$timeout.cancel( timer );
}
);
}
//返回指令的配置
return({
link: link,
scope: false
});
}
);
</script>
</body>
</html>
一般来说，放任$timeOut定时器可能不会有多大的影响。但是最好的做法是将它cancel掉，因为它有可能会造成很差的用户体验（或者想你的服务器发出不必要的请求）。这一点对于控制器和指令来说同样重要。
本文译自Don’t Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS，原文地址为http://www.bennadel.com/blog/2548-Don-t-Forget-To-Cancel-timeout-Timers-In-Your-destroy-Events-In-AngularJS.htm
如果你觉得本文对你有帮助，请点击为我提供赞助
说说Angular中的$timeOut定时器的更多相关文章
- JavaScript 的setTimeout 和Angular中的$timeout的區別
JavaScript中setTimeout返回值类型和意义说明: 1.setTimeout :暂停指定的毫秒数后执行指定的代码,返回值是id标识,这个id的意义就是通过clearTimeout来清理暂 ...
- $timeout()定时器
非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇到 ...
- angular源码分析：angular中$rootscope的实现——scope的一生
在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...
- Linux内核完全注释阅读笔记1：O(1)时间复杂度查找timeout定时器
前言 一直有Linux kernel情节,之前也一直在看Linux kernel相关的书和代码,但是每次到最后又由于兴趣转变而荒废了.这次终于静下心来想把Linux内核相关的代码好好看看,算是对自己的 ...
- angular中的代码执行顺序和$scope.$digest();
angular中,在一个controller里$scope.whatever=function(){...} ,这样写只是在这个scope作用域里定义了一个函数,如果要执行的话还得在这个control ...
- angular中的promise
angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...
- angular中的路径问题
我们在写项目时会遇到启动页调到引导页,引导页再调到首页, 那我们在用angular框架写这种东西的时候如果我们不细心的话就会遇到问题, 比如说找不到引导页的图片等等. 那我们怎么解决这个问题呢? 首先 ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
随机推荐
- 正则表达式匹配a标签的href
JS代码: <html> <head> <script language="javascript"> var a='<P><A ...
- C#反射技术概念作用和要点
反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的 ...
- ASP.NET MVC Model绑定小结
Model绑定是指从URL提取数据,生成对应Action方法的参数这个过程.前面介绍的一系列Descriptor负责提供了控制器,行为方法和参数的元数据,ValueProvieder负责获取数据,剩下 ...
- C#写快速排序
//先上快排代码------------------------------------------------------------------------public static void Q ...
- EditText html 出现提示 This text field does not specify an inputType or a hint
1 <EditText 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_c ...
- CodeSnippet.info 开源说明 和 环境搭建 (第一版)
Github开源声明 本网站的代码开源,开源的目的如下 技术分享 希望业内同行贡献代码 希望能够让网站更加安全 开源地址: CodeSnippet开源地址 关于代码贡献 任何人都可以贡献代码,一般在 ...
- Extjs中全键盘操作，回车跳到下一单元格
listeners: { afterRender: function (thisForm, options) { var els = Ext.DomQuery.select('input[type!= ...
- Firemonkey Bitmap 设定像素颜色 Pixel
VCL 和 Firemonkey 的 Bitmap 处理像素的方式不相同,下例为将图片内不是「白色」的像素全部改成「黑色」: procedure TForm1.Button1Click(Sender: ...
- JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
- 通过angularJS官方案例快速入门
官方案例-angular-phonecat angularJS官方提供了一个官方案例给大家进行循序渐进的学习,但是如果之前没有接触过node.js以及git的同学这个案例拿着也无从下手-这里就介绍一下 ...