Angular 定时器$timeout和$interval,延时调用
项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘。
$timeout
用法如下:$timeout(fn,[delay],[invokeApply]);
- fn:一个将被延迟执行的函数。
- delay:延迟的时间(毫秒)。
- invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply。
方法:cancel(promise);
promise:$timeout函数的返回值。
具体使用:在项目中用到的其中一处是键入字符然后自动发送请求查询,如果每键入一个字符即发送一次请求,在数据库表庞大的时候,数据库肯定会有意见了。这时候就需要用到延时查询了,还需要结合$watch,具体使用如下:
var timeout;
$scope.$watch('idNo', function(newVal, oldVal) {
if(newVal != oldVal) {
if(timeout) {
$timeout.cancel(timeout);
}
timeout = $timeout(function() {
$http.get(url).success(function(data) {});
}, 800);
}
});
如上写法,if(newVal != oldVal){}
是默认情况下不查询,键入字符后才会发送请求查询,若想默认情况下就查询则需要去掉该if判断。$timeout.cancel(timeout);
是清除上次$itmeout返回的promise。
$interval
用法如下:$interval(fn,delay,[count],[invokeApply],[Pass]);
- fn:一个将被反复执行的函数。
- delay:每次调用的间隔毫秒数值。
- count:循环次数的数值,如果没设置,则无限制循环。
- invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply。
- Pass:函数的附加参数。
方法:cancel(promise);
promise:$interval函数的返回值。
具体使用:
1.经常使用的是
function hello() {
...
console.log("hello world");
}
var timer = $interval(function(){
function hello() {}
},100);
timer.then(function() {
console.log("done");
});
以上是每100毫秒执行hello()函数,每执行完一次则调用then函数。
2. 控制循环的次数:var timer = $interval(function(){},100,10);
,参数10则是限制定时器循环10次,若该参数没有定义则表示无数次循环。
3. 清除interval定时器:通过‘interval.cancle(timer)`删除$interval返回的promise即可清除,而且必须要清除,否则会无限循环。在angular controller中只要开始执行定时任务,只要不清除则会一直执行,无论是否切换到其他的controller和页面,可能会导致不必要的错误。
4. 项目中用到的完整实例:
// 定时器 定时刷新数据
var timer = $interval(
function() {
hello();//自己定义的每次需要执行的函数,也可以写一些其他的内容
},
5000
);
//当DOM元素从页面中被移除时,AngularJS将会在scope中触发$destory事件。
//这让我们可以有机会来cancel任何潜在的定时器。切换controller、页面后即可调用
$scope.$on(
"$destroy",
function() {
$interval.cancel( timer );
}
);
本文转载自:http://blog.csdn.net/xuanhaiyang2008/article/details/52121540
Angular 定时器$timeout和$interval,延时调用的更多相关文章
- Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法
项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执 ...
- ios想要取消执行延时调用的方法
想要取消执行延时调用的方法: [[self class] cancelPreviousPerformRequestsWithTarget:self selector:@selector(hideDia ...
- GCD 和延时调用
因为 Playground 不进行特别配置的话是无法在线程中进行调度的,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. GCD 是一种非常 ...
- 通过小实例谈谈javascript的间隔调用和延时调用
用 setInterval方法可以以指定的间隔实现循环调用函数,直到clearInterval方法取消循环 用clearInterval方法取消循环时,必须将setInterval方法的调用赋值给一个 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- 定时器 延时调用setTimeout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AngularJS中$timeout和$interval的用法详解
1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.controller('controllerCtrl', ['app', '$scope','$htt ...
- [转]AngularJS中$timeout和$interval的用法详解
本文转自:http://www.cnblogs.com/moli-/p/5827618.html 1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.co ...
- AngularJS $timeout和 $interval ,定时器手机验证码倒计时
$interval是 window.setInterval的Angular包装形式.$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间).$interval多数用于计时 ...
随机推荐
- 使用nvm进行node多版本管理
nvm与Python的virtualenv和Ruby的rvm类似.NVM (Node Version Manager,Node多版本管理器)是一个通用的叫法,它目前有许多不同的实现.通常我们说的 nv ...
- 版本控制-搭建git服务器
GitHub是一个免费托管开源代码的Git服务器,如果我们不想公开项目的源代码,又不想付费使用,那么我们可以自己搭建一台Git服务器. 下面我们就看看,如何在Ubuntu上搭建Git服务器.我们使用V ...
- Mac下安装Mysql以及修改Mysql密码
1.安装Mysql 安装有2种办法,一种是下载mysql安装文件,慢慢安装,另一种就是下载xmpp,里面自带mysql,就像是安装普通的mac软件一样,安装完毕,就有了mysql了. 方法一,官网下载 ...
- Spark机器学习(9):FPGrowth算法
关联规则挖掘最典型的例子是购物篮分析,通过分析可以知道哪些商品经常被一起购买,从而可以改进商品货架的布局. 1. 基本概念 首先,介绍一些基本概念. (1) 关联规则:用于表示数据内隐含的关联性,一般 ...
- settings.xml配置详解
简单值 一半顶层settings元素是简单值,它们表示的一系列值可以配置Maven的核心行为:settings.xml中的简单顶层元素 < settings xmlns="http:/ ...
- c++类大四个默认函数-构造函数 析构函数 拷贝构造函数 赋值构造函数
每个类只有一个析构函数和一个赋值函数,但可以有多个构造函数(包含一个拷贝构造函数,其它的称为普通构造函数).对于任意一个类A,如果不编写上述函数,C++编译器将自动为A 产生四个缺省的函数,例如: A ...
- SpringCloud服务间调用
SpringCloud服务间的调用有两种方式:RestTemplate和FeignClient.不管是什么方式,他都是通过REST接口调用服务的http接口,参数和结果默认都是通过jackson序列化 ...
- [Aaronyang] 写给自己的WPF4.5 笔记10[层次数据需求处理,TreeView绿色文章1/4]
我的文章一定要做到对读者负责,否则就是失败的文章 --------- www.ayjs.net aaronyang技术分享 AY留言: 文章根据难易,我根据游戏的规则进行了分色,希望读者 ...
- 浏览器URL参数解决方案
function getUrlParams() { var search = window.location.search; // 写入数据字典 , search.length).split(&quo ...
- android listview优化:滑动时颜色错乱问题
最近android的listview写多了,也学习了各种listview的优化,列如viewHolder的使用.今天做item颜色设置时遇到一个新的问题.我这里设置“未完成”是灰色的,“已完成”是 ...