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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
详解用async/await来处理异步
Aug 28 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
原生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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
模拟flock实现文件锁定
2007/02/14 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
JavaScript网页定位详解
2014/01/13 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python reduce 函数使用详解
2017/12/05 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python实现最常见加密方式详解
2019/07/13 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python 实现波浪滤镜特效
2020/12/02 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
小学课外活动总结
2014/07/09 职场文书
运动会报道稿300字
2014/10/02 职场文书
中秋节主题班会
2015/08/14 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python