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 相关文章推荐
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 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中filter_input函数用法分析
2014/11/15 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python常见工厂函数用法示例
2018/03/21 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
《匆匆》教学反思
2014/02/22 职场文书
厨师长岗位职责
2014/03/02 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL