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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
vue中轮训器的使用
Jan 27 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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
Terran历史背景
2020/03/14 星际争霸
利用PHP创建动态图像
2006/10/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
python计算一个序列的平均值的方法
2015/07/11 Python
Python单例模式的两种实现方法
2017/08/14 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
详解python分布式进程
2018/10/08 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
python 模拟登陆github的示例
2020/12/04 Python
Python对excel的基本操作方法
2021/02/18 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
安全责任协议书
2014/04/21 职场文书
初三新学期计划书
2014/05/03 职场文书
2014年民政工作总结
2014/11/26 职场文书
同意转租证明
2015/06/24 职场文书
党性修养心得体会2016
2016/01/21 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis