$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掉，因为它有可能会造成很差的用户体验（或者想你的服务器发出不必要的请求）。这一点对于控制器和指令来说同样重要。
随机推荐
- java基础学习总结——java环境变量配置(转)
只为成功找方法,不为失败找借口! 永不放弃,一切皆有可能!!! java基础学习总结——java环境变量配置 前言 学习java的第一步就要搭建java的学习环境,首先是要安装 JDK,JDK安装好之 ...
- MySQL实时性能监控工具doDBA tools
doDBA tools是什么? doDBA tools是一个基于控制台的远程监控工具,它不需要在本地/远程系统上安装任何软件,它可以实时收集操作系统.MySQL.InnoDB的实时性能状态数据,并可以 ...
- XXL-Job路由策略
企业项目中所有的任务调动通过XXL-Job 去管理调度 路由策略类似于Nginx哦 XXL-Job实际封装的是Quartz. 关于分片广播,执行器集群部署时候,任务路由策略选择“”分片广播”情况下,一 ...
- java深入探究12-框架之Spring
1.引入Spring 我们在搭建框架时常常会解决问题:对象创建,对象之间依赖关系如何处理,Spring就是来解决这类问题的:控制反转依赖注入 2.环境搭建 1)下载源码:其中3.0以下版本源码中有Sp ...
- 如何用Spring框架的<form:form>标签实现REST风格的增删改查操作
1.首先创建两个bean类,Employee(职工)和Department(部门),一个部门可以有多个职工 Employee类(属性:职工ID:id:姓名:lastName:邮箱:email:性别:g ...
- 动态规划之最短路径（Floyd算法）
package main import ( "fmt" ) func floyd(m [][]int) { length := len(m[]) var min, i, j int ...
- 谷歌地图OGC WMTS服务规则
http://mt0.google.cn/vt/lyrs=s&x=0&y=0&z=1 其中:z即为瓦片的层次,0层覆盖全球:y为行,从上往下为0~2^z-1:x为列,从左往右依 ...
- keystone uwsgi failed
~$ /usr/local/bin/uwsgi /etc/keystone/keystone-uwsgi-public.ini[uWSGI] getting INI configuration fro ...
- Left Join ，On Where
SQL语句如下: SELECT * FROM 表1 LEFT JOIN 表2 ON 表1.id = 表2.id AND 表2.Name != 'ff' WHERE 表1.NAME != 'aa' 步骤 ...
- Python学习之路day4-列表生成式、生成器、Iterable和Iterator
一.列表生成式 顾名思义,列表生成式就是用于生成列表的特殊语法形式的表达式. 1.1 语法格式 [exp for iter_var in iterable] 工作过程: 1.通过iter_var迭代i ...