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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 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 中的4种标记风格介绍
2012/05/10 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
饭店工作计划书
2014/01/10 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
《凡卡》教学反思
2014/04/09 职场文书
走进科学观后感
2015/06/18 职场文书
农村婚庆主持词
2015/06/29 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python