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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
vue生命周期实例小结
Aug 15 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue实现微信分享功能
Nov 28 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
express框架下使用session的方法
2019/07/31 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
信息学院毕业生自荐信范文
2014/03/04 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
刘胡兰观后感
2015/06/16 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
python创建字典及相关管理操作
2022/04/13 Python