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 相关文章推荐
Jquery Ajax方法传值到action的方法
May 11 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python挖矿算力测试程序详解
2019/07/03 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python属于解释语言吗
2020/06/11 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
大学活动邀请函
2014/01/28 职场文书
病假证明模板
2015/06/19 职场文书