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 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
js实现拖拽功能
Mar 01 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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 mssql 时间格式问题
2009/01/13 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php检测文本的编码
2015/07/26 PHP
浅谈php7的重大新特性
2015/10/23 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python SocketServer源码深入解读
2019/09/17 Python
python 弧度与角度互转实例
2020/04/15 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
2014银行授权委托书样本
2014/10/04 职场文书
房产电话营销开场白
2015/05/29 职场文书