zoukankan      html  css  js  c++  java
  • 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. 清除intervalinterval.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 );
      }
    );

    本文转载自:http://blog.csdn.net/xuanhaiyang2008/article/details/52121540

  • 相关阅读:
    ASP.NET Core 中文文档 第四章 MVC(3.2)Razor 语法参考
    ASP.NET Core 中文文档 第四章 MVC(3.1)视图概述
    ASP.NET Core 中文文档 第四章 MVC(2.3)格式化响应数据
    ASP.NET Core 中文文档 第四章 MVC(2.2)模型验证
    ASP.NET Core 中文文档 第四章 MVC(2.1)模型绑定
    ASP.NET Core 中文文档 第四章 MVC(01)ASP.NET Core MVC 概览
    mysql 解除正在死锁的状态
    基于原生JS的jsonp方法的实现
    HTML 如何显示英文单、双引号
    win2008 r2 服务器php+mysql+sqlserver2008运行环境配置(从安装、优化、安全等)
  • 原文地址:https://www.cnblogs.com/imsomnus/p/7081033.html
Copyright © 2011-2022 走看看