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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
vue3中的组件间通信
Mar 31 Vue.js
React forwardRef的使用方法及注意点
Jun 13 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
从零学Python之hello world
2014/05/21 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python argv用法详解
2016/01/08 Python
Python 递归函数详解及实例
2016/12/27 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python之array赋值技巧分享
2019/11/28 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
网络教育自我鉴定
2014/02/04 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
实用求职信模板范文
2019/05/13 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python