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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JavaScript如何判断对象有某属性
Jul 03 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
PHP生成条形图的方法
2014/12/10 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
微信小程序实现签到功能
2018/10/31 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python中常见的数据类型小结
2015/08/29 Python
Python函数中不定长参数的写法
2019/02/13 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
满月酒主持词
2014/03/27 职场文书
幼儿教师求职信
2014/05/24 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js
基于Redission的分布式锁实战
2022/08/14 Redis