5、Angular中的$timeOut定时器
来源:互联网 发布:股票历史分时数据获取 编辑:程序博客网 时间:2024/05/30 07:12
人们似乎常常将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事件被触发时(在这里的例子中是位于指令中),我们将取消当前的定时器:
/* * $timeout定时器测试 */// 定义控制器test.controller( "DemoController", function( $scope ) { $scope.section = "htesty"; //在toggle函数中改变section的值,以此在标记中显示/隐藏不同的部分 $scope.toggle = function() { if ( $scope.section === "htesty" ) { $scope.section = "sad"; } else { $scope.section = "htesty"; } }; });//定义指令test.directive("bnDirective", function($timeout) { //将用户界面的事件绑定到$scope上 function link($scope, element, attributes) { //当timeout被定义时,它返回一个promise对象 var timer = $timeout(function() { console.log("Timeout executed", Date.now()); }, 3000); //将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); console.log("timer has been removed!"); }); } //返回指令的配置 return ({ link : link, scope : false });});
页面中:
<div ng-controller="DemoController"> <h4>Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS</h4> <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></div>
结果:
"Timeout executed" 1427091576150
"Timer resolved!" 1427091576151
"timer has been removed!"
本文译自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
- 5、Angular中的$timeOut定时器
- Angular 定时器$timeout和$interval
- angular $timeout
- angular $timeout
- Angular TimeOut Tricky
- angular+定时器
- angular timeout interval cancel $destroy
- AngularJS之定时器(timeout)
- AngularJS之定时器(timeout)
- angular设置一个定时器
- angular内置服务interval和timeout
- ADO中的TimeOut
- ajax中的timeout
- AngularJs服务-$timeout or $interval(定时器)
- webDriver中的几种timeout
- 解决Tomcat中的timeout问题
- linux expect中的timeout设定
- http各种中的各种timeout
- Servlet中PrintWriter和OutputStream两个流不能同时使用
- ViewController生命周期
- Alcatraz的安装和使用,以及Xcode6.2不显示Package manage的问题
- Android 中的Touch事件分发机制
- js serializeArray方法
- 5、Angular中的$timeOut定时器
- word2vec原理概述
- 迭代子模式(Iterator)
- man ascii,cal,xxd,mdfind
- 使用Linux 原始套接字抓取数据链路层上IEC61850-9-2(LE) SV数据包并显示的参考程序
- Objective-C基础学习笔记(七)-类的本质与SEL
- linux上安装配置vsftpd
- 使用Storm实现实时大数据分析
- 黑马程序员——Java语言简述