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 相关文章推荐
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
javascript中的隐式调用
Feb 10 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
js实现列表按字母排序
Aug 11 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版
2006/10/09 PHP
php目录管理函数小结
2008/09/10 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python修改文件内容的3种方法详解
2019/11/15 Python
tensorflow多维张量计算实例
2020/02/11 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
Python图像读写方法对比
2020/11/16 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
JavaScript实现简单拖拽效果
2021/09/15 Javascript
python ConfigParser库的使用及遇到的坑
2022/02/12 Python