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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
vue实现计算器功能
Feb 22 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
php中var_export与var_dump的区别分析
2010/08/21 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python add_argument()用法解析
2020/01/29 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
cf搞笑广告词
2014/03/14 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js