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 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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实现Mysql读写分离
2013/06/28 PHP
跟我学Laravel之路由
2014/10/15 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
java script编程起步(第三课)
2007/01/10 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python常见数字运算操作实例小结
2019/03/22 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python中turtle库的使用实例
2019/09/09 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
建材投资建议书
2014/05/16 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014最新实习证明模板
2014/10/02 职场文书
培养联系人考察意见
2015/06/01 职场文书
升学宴祝酒词
2015/08/11 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle