$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掉，因为它有可能会造成很差的用户体验（或者想你的服务器发出不必要的请求）。这一点对于控制器和指令来说同样重要。
随机推荐
- uiwebview 加载本地js、css、img，html从网站加载
资源文件都是放在根目录下 1.index.html <html> <head> <title>My test Page</title> <link ...
- ios开发在导入环信SDK后运行出现 Reason: image not found 的解决方案
在导入环信的SDK后,运行出现:
- Python之面向对象总结
一.面向对象 1.面向过程 a.优点:极大的降低了写程序的复杂度,只需要顺着执行的步骤,堆叠代码即可 b.缺点:一套流水线或者流程就是来解决一个问题,代码就是牵一发而东莞全身 2.面向对象 a.优点: ...
- 命令行下载Baiduyun files
源码 步骤1:先拿到一个插件插件地址1,插件地址2 步骤2:解压并保存 下载的文件中,包含了一个Baidu-PCS的文件夹.然后打开我们的资源管理器.将Baidu-PCS随意移动到一个文件目录下,但文 ...
- Word 2010怎么自动添加文献引用
1.将光标移至在需要添加引用的地方,比如我下图中在这段文字最后添加一个引用(为了方便说明) 2.(2010版本) 3.点击上面的“引用”,然后点击蓝圈里面的小图标,出现下面对话框,并设置成如图,点 ...
- UI(UGUI)框架(一)---------概述与保存/读取面板类型与路径
01.概念:管理场景中所有的面板,控制面板之间的跳转 02.项目层级目录: Resources:存放UIPanel,习惯把所有的一个个面板做成预制源,使用时加载 Scenes:存放场景 UIFrame ...
- 编译内核时覆盖KBUILD_BUILD_USER和KBUILD_BUILD_HOST
默认情况下make kernel.img编译出来的内核在/proc/version中显示的内容是: Linux version 3.0.36+ (xxx@yyyy) (gcc version 4.6. ...
- java重置Timer执行频率
public class BallUtil { public static Timer fisTimer ; public static void fisStartBall(){ long first ...
- 基于鸿洋博客自定于View实现的android音量调节控件
1.在values建立attrs.xml,写出你需要的属性: <?xml version="1.0" encoding="utf-8"?> < ...
- 计算机_软件技巧_01_优雅地再word中插入代码
二.参考资料 1.如何优雅的在 Microsoft word中插入代码