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

若有不到位之处,请给予指正。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值