AngularJS实现页面定时刷新

有时我们在前端可能会有这样的需求：

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);
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS定时器的使用与移除操作方法【interval与timeout】

    本文实例讲述了AngularJS定时器的使用与移除操作方法.分享给大家供大家参考,具体如下: 1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟. $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 (1)timeout timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象. var

  • AngularJs定时器$interval 和 $timeout详解

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行.通知的值将是运行的迭代次数.取消一个间隔,调用$intreval.cancel(promise). 备注:当你执行完这项服务后应该把它销毁.特别是当controller或者directive元素被销毁时而$interval未被销毁.你应该考虑到在适当的时候

  • angularjs定时任务的设置与清除示例

    angularjs定时任务的设置与清除示例

    人们似乎常常将AngularJS中的$timeOut()  $interval()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()$interval()的回调函数将会造成非常不好的影响,你可能会因此遇到代码莫名其妙的出现问题,或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形.管理好你的$timeOut/$interval定时器的小技巧就是在$destory事件中将它们取消. 和JavaScript中原生的setTimeout()以

  • AngularJS实现页面定时刷新

    有时我们在前端可能会有这样的需求: 1.每隔一段时间刷新一下页面中的数据 2.根据需要可以暂停和启用刷新 接下来我们就来看下AngularJS的实现方法: 首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情,那么我们的间歇性刷新就使用interval来实现. $interval使用方法: 1.启动一个定时任务 $interval(function(){},n1,n2); 第一个参数function是指我们的定时任务要触发的事件, 第二个参数n1是指每隔多少毫秒触发

  • JavaScript实现页面定时刷新（定时器，meta）

    接下来进入正题-定时不断刷新页面的方法: 1.看到定时,很容易想到js的定时器: //第一种方法 //由于我们已经有了一个定时器,所以只要在定时器test中加入一句刷新页面的代码即可 function test(){ h1.style.color = "red"; h1.innerText = "我变化了"; history.go(0);//可以换成上一篇博客的任何一种方法. } setInterval(test, 1000); 2.通过meta来设置: <!

  • 页面定时刷新(1秒刷新一次)

    复制代码 代码如下: <script language="JavaScript"> function myrefresh() { window.location.reload(); } setTimeout('myrefresh()',1000); //指定1秒刷新一次 </script>

  • Ajax实现无闪烁定时刷新页面实例代码

    在Web开发中我们经常需要实现定时刷新某个页面: 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录): 2.实现实时站内短信: 3.定时更新页面数据等等.但是我们在网上搜搜会发现有很多定时刷新页面的方法,最简单的就是在<head></head>标记之间加上如下代码: 在<head></head>标记之间加上代码,实现定时刷新,此代码我已经测试过,可以实现效果 <meta http-equiv="ref

  • AngularJs返回前一页面时刷新一次前面页面的方法

    要求: 页面A进入到页面B,在页面B处理完后返回页面A,页面A里的数据应该动态的减去一条,但由于一般情况下页面是缓存起来的,返回A后读取的是缓存静态页面,里面显示的数据不会减少.应客户要求,需要重新加载一次数据,达到页面A可以刷新数据目的. 研究过程: 从网上寻找发现,有一个方法可以获取到当前页面的URL:$location 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例: 1.

  • JS定时刷新页面及跳转页面的方法

    Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2);2. history.back().3. window.history.forward()返回下一页4. window.history.go(返回第几页,也可以使用访问过的URL)例: 复制代码 代码如下: <a href="javascript:history.go(-1);">向上一页</a>response.

  • Vue页面手动刷新,实现导航栏激活项还原到初始状态

    场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list),顶部导航激活项还原到初始状态(这里默认是"工作台"项). 原理:每次刷新都会重新实例化Vue,也就是会调用created方法. <template> <el-menu :default-active="defaultActiveIndex&

  • Jquery、Ajax、Struts2完成定时刷新的方法

    步骤一:导入jquery插件 复制代码 代码如下: <script type="text/javascript" src="js/easyui/jquery-1.8.0.min.js"></script> 步骤二:在<body></body>中添加信息显示的地方 复制代码 代码如下: <label id="context"></label> 步骤三:在页面中添加JS代码 复制

  • JS区分浏览器页面是刷新还是关闭

    Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以解决,使用window对象的onbeforeunload事件即可,如果产品经理只提出这样的需求,那确实无可厚非,然而其需要的不仅仅是这些... 例如,我们一次项目开发中,产品经理就针对我们的实现提出了"改进方案": 你们这弹出框太丑了,

  • JS获取当前日期时间并定时刷新示例

    JS获取当前日期时间 var date = new Date(); date.getYear(); //获取当前年份(2位) date.getFullYear(); //获取完整的年份(4位,2014) date.getMonth(); //获取当前月份(0-11,0代表1月) date.getDate(); //获取当前日(1-31) date.getDay(); //获取当前星期X(0-6,0代表星期天) date.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) d

随机推荐