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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
护士求职推荐信范文
2013/11/23 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
中青班党性分析材料
2014/02/16 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
安全月宣传标语
2014/10/07 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书