AngularJS实现页面定时刷新


Posted in Javascript onMarch 14, 2017

有时我们在前端可能会有这样的需求:

1、每隔一段时间刷新一下页面中的数据

2、根据需要可以暂停和启用刷新

接下来我们就来看下AngularJS的实现方法:

首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情,那么我们的间歇性刷新就使用interval来实现。

$interval使用方法:

1、启动一个定时任务

$interval(function(){},n1,n2);

第一个参数function是指我们的定时任务要触发的事件,

第二个参数n1是指每隔多少毫秒触发一次

第三个参数n2是指定时触发事件的次数,无限次循环,则可以设置为-1。

如:

$interval(function(){console.log('aaa');},1000,10);

表示每个1秒在控制台打出一次aaa,共打印10次

2、停止一个任务

$interval.cancel(timer);

timer为任务对象

如:

var timer = $interval(function(){console.log('aaa');},1000,10); 
$interval.cancel(timer);

在使用过程中我们发现如果只使用了$interval(function(){},n1,n2); 关闭页面后,浏览器仍然后执行相应的任务,如果不希望继续执行,即页面当前页面关闭,自动任务立即停止,则可以使用:

$scope.$on('$destroy',function(){
  $interval.cancel(timer);
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 #Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 #Javascript
Bootstrap笔记—折叠实例代码
Mar 13 #Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 #Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 #Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 #Javascript
jQuery+CSS3实现点赞功能
Mar 13 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
JS防止用户多次提交的简单代码
2013/08/01 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
基于jquery实现五星好评
2017/11/18 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python生成器generator用法示例
2018/08/10 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
计算机网络专业个人的自我评价
2013/10/17 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
2015年元旦标语大全
2014/12/09 职场文书
担保贷款承诺书
2015/04/30 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
学习心理学心得体会
2016/01/22 职场文书