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函数的返回值。
具体使用：

经常使用的是

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

  }

);

巴特西

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

$timeout

$interval

最新文章

热门文章