Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法

项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘。

$timeout

用法如下$timeout(fn,[delay],[invokeApply]);

  • fn:一个将被延迟执行的函数。
  • delay:延迟的时间(毫秒)。
  • invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply。

方法cancel(promise); 
promise:$timeout函数的返回值。

具体使用:在项目中用到的其中一处是键入字符然后自动发送请求查询,如果每键入一个字符即发送一次请求,在数据库表庞大的时候,数据库肯定会有意见了。这时候就需要用到延时查询了,还需要结合$watch,具体使用如下:

var timeout;
$scope.$watch(‘idNo‘, function(newVal, oldVal) {
  if(newVal != oldVal) {
    if(timeout) {
      $timeout.cancel(timeout);
    }
    timeout = $timeout(function() {
      $http.get(url).success(function(data) {});
    }, 800);
  }
});

如上写法,if(newVal != oldVal){}是默认情况下不查询,键入字符后才会发送请求查询,若想默认情况下就查询则需要去掉该if判断。$timeout.cancel(timeout);是清除上次$itmeout返回的promise。

$interval

用法如下$interval(fn,delay,[count],[invokeApply],[Pass]);

  • fn:一个将被反复执行的函数。
  • delay:每次调用的间隔毫秒数值。
  • count:循环次数的数值,如果没设置,则无限制循环。
  • invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply。
  • Pass:函数的附加参数。

方法cancel(promise); 
promise:$interval函数的返回值。 
具体使用

  1. 经常使用的是
function hello() {
...
    console.log("hello world");
}
var timer = $interval(function(){
  function hello() {}
},100);
timer.then(function() {
  console.log("done");
});

以上是每100毫秒执行hello()函数,每执行完一次则调用then函数。

2. 控制循环的次数:var timer = $interval(function(){},100,10);,参数10则是限制定时器循环10次,若该参数没有定义则表示无数次循环。 
3. 清除interval定时器:通过‘interval.cancle(timer)`删除$interval返回的promise即可清除,而且必须要清除,否则会无限循环。在angular controller中只要开始执行定时任务,只要不清除则会一直执行,无论是否切换到其他的controller和页面,可能会导致不必要的错误。 
4. 项目中用到的完整实例:

// 定时器 定时刷新数据
var timer = $interval(
  function() {
    hello();//自己定义的每次需要执行的函数,也可以写一些其他的内容
  },
  5000
);
//当DOM元素从页面中被移除时,AngularJS将会在scope中触发$destory事件。
//这让我们可以有机会来cancel任何潜在的定时器。切换controller、页面后即可调用
$scope.$on(
  "$destroy",
  function() {
    $interval.cancel( timer );
  }
);
时间: 2024-08-26 06:23:16

Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法的相关文章

Angular 定时器$timeout和$interval,延时调用

项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执行的函数. delay:延迟的时间(毫秒). invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply. 方法:cancel(promise); promise:$timeout函数的返回值. 具体使用:在项目中用到的其中一处是键入字符然后自动发送请求查询,如果每键入一个

JSP简单练习-定时刷新页面

<%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.util.Date" %> <html> <head> <title>定时刷新页面</title> </head> <body> <% // 设置刷新页面的时间,每隔1秒钟刷新一次 response.setHeader(

Response_输出数据,实现文件下载,定时刷新页面,是否缓存,重定向,实现验证码

1.Response_输出数据 1.Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. ServletResponse -- 通用的response提供了一个响应应该具有最基本的属性和方法|-HttpServletResponse -- 在ServletResponse的基础上针对于HTTP协议增加了很多强化的属性和方法 2.HttpServletResponse对象封装了向客户端发送响应状态码.响应头.实体数

http-equiv=&quot;Refresh&quot; 实现定时刷新页面

***.html自动跳转文件代码如下: <HTML> <HEAD><META http-equiv="Refresh" content="5; url=******.htm"> <META http-equiv="content-type" content='text/html; charset=UTF-8'> <script language="JavaScript" s

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.Write(

Ajax实现定时刷新页面

function deleteValue(){ var refresh = function() { $.ajax({ type:'post', url:'/Application/index', timeout:30000, data:{time:"3"}, dataType:'html', success:function(data){ if(data.state==200){ alert("nihao"); }else{ alert(data.message)

PHP定时刷新当前页面

PHP中定时刷新页面的功能如何实现! 1分钟刷新一次页面! 这一般不用php实现,用客户端的脚本就可以,甚至用html自带的就行. html实现: <meta http-equiv="refresh" content="60"> echo "<META HTTP-EQUIV=REFRESH CONTENT='60;URL=index.php'>"; php刷新当前页面 echo "<script langu

刷新页面

定时刷新页面,最常见的有两种实现方式:一种是通过JavaScript+HTMLDOM,另一种则是通过meta标签来实现. 1.JavaScript+HTMLDOM,示例代码如下: 1 2 3 4 functionrefresh(seconds){ setTimeout("self.location.reload()",seconds*1000); } refresh(600);//调用方法启动定时刷新,数值单位:秒. 2.通过meta标签来实现(在页面中添加meta标签refresh也

JS倒计时刷新页面

/** * 定时刷新页面 */ var tim = 10; function clock(){ $("#seconds").html(tim+"秒后刷新"); tim--; if(tim==0){ window.location.reload(); tim=10; } setTimeout('clock()',1000*1); } THML页面显示刷新时间: <span style="color:#f00;" id="second