项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘。

$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,延时调用的更多相关文章

  1. Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法

    项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执 ...

  2. ios想要取消执行延时调用的方法

    想要取消执行延时调用的方法: [[self class] cancelPreviousPerformRequestsWithTarget:self selector:@selector(hideDia ...

  3. GCD 和延时调用

    因为 Playground 不进行特别配置的话是无法在线程中进行调度的,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. GCD 是一种非常 ...

  4. 通过小实例谈谈javascript的间隔调用和延时调用

    用 setInterval方法可以以指定的间隔实现循环调用函数,直到clearInterval方法取消循环 用clearInterval方法取消循环时,必须将setInterval方法的调用赋值给一个 ...

  5. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  6. 定时器 延时调用setTimeout

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. AngularJS中$timeout和$interval的用法详解

    1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.controller('controllerCtrl', ['app', '$scope','$htt ...

  8. [转]AngularJS中$timeout和$interval的用法详解

    本文转自:http://www.cnblogs.com/moli-/p/5827618.html 1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.co ...

  9. AngularJS $timeout和 $interval ,定时器手机验证码倒计时

    $interval是 window.setInterval的Angular包装形式.$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间).$interval多数用于计时 ...

随机推荐

  1. 05-树9 Huffman Codes及基本操作

    哈夫曼树与哈弗曼编码 哈夫曼树 带权路径长度(WPL):设二叉树有n个叶子结点,每个叶子结点带有权值 Wk,从根结点到每个叶子结点的长度为 Lk,则每个叶子结点的带权路径长度之和就是: WPL = 最 ...

  2. 【H5动画】谈谈canvas动画的闪烁问题

    一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...

  3. oracle 11g 安装及netca,dbca乱码之解决

    在中文Linux下安装Oracle 11g,运行runInstaller后默认会出现乱码,解决办法如下: 1.准备字体zysong.ttf,点击下载,解压下载到的fallback 2.使用归档管理器打 ...

  4. 用 JAAS 和 JSSE 实现 Java 安全性

    JAAS 和 JSSE 概述 JAAS 提供了一种灵活的.说明性的机制,用于对用户进行认证并验证他们访问安全资源的能力.JSSE 定义了通过安全套接字层(SSL)进行安全 Web 通信的一种全 Jav ...

  5. iOS 一些常见问题的整理

    一.通知 对于通知,大家想必都不陌生,它是一个单例,允许当事件发生时通知一些对象,让我们在低程度耦合的情况下,来达到通信的目的. 通知的优势:1.不需要编写太多代码,实现比较简单2.对于一个发出的通知 ...

  6. 基于Centos搭建 Hadoop 伪分布式环境

    软硬件环境: CentOS 7.2 64 位, OpenJDK- 1.8,Hadoop- 2.7 关于本教程的说明 云实验室云主机自动使用 root 账户登录系统,因此本教程中所有的操作都是以 roo ...

  7. SNF快速开发平台MVC-表格单元格合并组件

    1.   表格单元格合并组件 1.1.      效果展示 1.1.1.    页面展现表格合并单元格 图 4.1 1.1.2.    导出excel合并单元格 图 4.2 1.2.      调用说 ...

  8. 一个vue请求接口渲染页面的例子

    new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...

  9. c 链表之 快慢指针 查找循环节点

    参考:http://blog.csdn.net/wenqian1991/article/details/17452715 上面分析了 根据这张图 推倒出 数学公式. 刚接触 不能一下弄明白.下面结合上 ...

  10. AOP如何在业务结束时,根据参入参数和返回结果添加日志

    IMethodReturn retvalue = getNext()(input, getNext); if (retvalue.Exception != null) { System.IO.File ...