$timeout, $interval

layout: post
title: Angular@1.4.3 中文 API 服务篇 $timeout & $interval
desc: '$timeout 是一个window.setTimeout 的Angular封装，这个 fn 函数被封装成了一个 try/catch 块并且授 $exceptionHandler 服务以任何例外。$interval是Angular对 window.setInterval 的封装。fn 函数将在每次延时的时候执行。一个注册的间隔函数的返回值是一个 promise
'
categories: jekyll update

$timeout

ng模块中的服务

window.setTimeout 的Angular封装，这个 fn 函数被封装成了一个 try/catch 块并且授 $exceptionHandler 服务以任何例外。

调用 $timeout 的返回值是一个 promise, 这个 promise 将会在延时已经结束时被解析，
超时函数（如果有的话）被执行了。

退出一个超时请求，调用 $timeout.cancel(promise)。如果在测试中你可以使用 $timeout.flush()
来同步刷新 deferred函数的队列。而如果你仅仅想要得到一个在一个指定延时时间之后会被解析的 promise，
你可以仅仅调用 $timeout 而不传入 fn 函数。

用法

$timeout([fn], [delay], [invokeApply], [Pass]);

参数

参数	形式	详细
fn(可选)	`function()=`	已经将在延时之后被执行的函数。
delay(可选)	`number`	以毫秒计的延时时间。(默认值: 0)
invokeApply(可选)	`boolean`	如果设置为 `false`则跳过模型的脏值检测，否则将在 `fn` 内调用 `$apply` 块。(默认值: true)
Pass(可选)	`*`	函数执行的附加参数

Promise - promise 将会在超时达成后被解析，它的值会被 fn 的返回值解析。

方法

cancel([promise]); - 取消一个与 promise 相关联的任务。这个结果会导致，promise会被拒绝解析。

参数

参数	形式	详细
promise (可选)	`promise`	`$timeout` 函数返回的 `promise`

boolean - 如果任务没有被执行就被成功取消了，则会返回 true。

$interval

ng模块中的服务

Angular对 window.setInterval 的封装。fn 函数将在每次延时的时候执行。一个注册的间隔函数的返回值是一个 promise。
这个 promise 将会在interval每次调用的时候得到广播，并且在计数迭代之后被解析，或者在未指定次数的情况下既执行无数次时解析。
这个通知的值将是已运行迭代的次数。如果想终端一个 interval，则调用 $interval.cancel(promise)。

测试中你可以使用 $interval.flush(millis) 设置其中的 millis 为毫秒时间来到达指定的时间点，
并且会触发在此过程中任何的函数。

注意: 用此服务创建的interval必须要在完成之后被明文销毁。特别地，在控制器的作用域和指令的元素被销毁时，
interval 也不会被自动销毁。你需要将此纳入考虑之中，确保在适合的时间退出 interval。详述之后的例子将会
介绍何时与怎样去做这些处理。

用法

$interval(fn, delay, [count], [invokeApply], [Pass]);

参数

参数	形式	详细
fn	`function()`	一个将被反复调用的函数
delay	`number`	毫秒记的间隔时间
count (可选)	`number`	循环的次数.如果不传入或者为0，那么$interval将会无限循环. (默认值: 0)
invokeApply (可选)	`boolean`	如果设置为 `true` 则跳过脏值检测，否则将在 `fn` 中执行 `$apply` (默认值: true)
Pass (可选)	`*`	函数执行的附加参数

promise - 一个每次迭代都会被通知的 promise。

方法

cancel([promise]); - 取消一个与 promise 相关的任务。

参数

参数	形式	详细
promise (可选)	`promise`	通过$interval 函数返回。

boolean - 如果任务被成功取消则返回 true 。

例子

html

<div>

  <div ng-controller="ExampleController">

    <label>Date format: <input ng-model="format"></label> <hr/>

    Current time is: <span my-current-time="format"></span>

    <hr/>

    Blood 1 : <font color='red'>{{blood_1}}</font>

    Blood 2 : <font color='red'>{{blood_2}}</font>

    <button type="button" data-ng-click="fight()">Fight</button>

    <button type="button" data-ng-click="stopFight()">StopFight</button>

    <button type="button" data-ng-click="resetFight()">resetFight</button>

  </div>

</div>

javascsript

angular.module('intervalExample', [])

.controller('ExampleController', ['$scope', '$interval',

  function($scope, $interval) {

    $scope.format = 'M/d/yy h:mm:ss a';

    $scope.blood_1 = 100;

    $scope.blood_2 = 120;

    var stop;

    $scope.fight = function() {

      // 如果$scope.fight进行中，则不会开启新的 $scope.fight

      if ( angular.isDefined(stop) ) return;

      stop = $interval(function() {

        if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {

          $scope.blood_1 = $scope.blood_1 - 3;

          $scope.blood_2 = $scope.blood_2 - 4;

        } else {

          $scope.stopFight();

        }

      }, 100);

    };

    $scope.stopFight = function() {

      if (angular.isDefined(stop)) {

        $interval.cancel(stop);

        stop = undefined;

      }

    };

    $scope.resetFight = function() {

      $scope.blood_1 = 100;

      $scope.blood_2 = 120;

    };

    $scope.$on('$destroy', function() {

      // 保证interval已经被销毁

      $scope.stopFight();

    });

  }])

// 用工厂方法注册一个 'myCurrentTime' 指令。

// 我们注入 $interval 服务和源自 DI 的 dateFilter 服务。

.directive('myCurrentTime', ['$interval', 'dateFilter',

  function($interval, dateFilter) {

    // 返回指令链接的函数. (不需要编译函数)

    return function(scope, element, attrs) {

      var format,  // 数据格式

          stopTime; // 以便我们可以取消时间更新

      // 用于更新 UI

      function updateTime() {

        element.text(dateFilter(new Date(), format));

      }

      // 监视表达式，并在改变时更新UI。

      scope.$watch(attrs.myCurrentTime, function(value) {

        format = value;

        updateTime();

      });

      stopTime = $interval(updateTime, 1000);

      // 监听 DOM 销毁(去除)事件，并取消下一次的UI更新

      // 是为了在 DOM 被删除之后防止再次更新次数。

      element.on('$destroy', function() {

        $interval.cancel(stopTime);

      });

    }

  }]);

随机推荐

装b指南
提溜一个糖水黄桃罐头瓶,放在桌边,坐下以后,脖子略微后仰,翘着二郎腿,低头盯着屏幕看需求. 最好点一根烟,牌子无所谓,能冒烟就行.要得就是云山雾绕的感觉,从烟雾中眯着眼睛看出去,一副胸有成竹的样. 一 ...
Java三大特征之------多态
1.定义指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式. 2.存在条件 2.1存在父子关系 2.2子类中存在重写方法 2.3父类类型的变量指向子类对象 ...
python网络爬虫（一）：网络爬虫科普与URL含义
1. 科普通用搜索引擎处理的对象是互联网的网页,目前网页的数量数以亿计,所以搜索引擎面临的第一个问题是如何设计出高效的下载系统,已将海量的网页下载到本地,在本地形成互联网网页的镜像.网络爬虫 ...
java的new BufferedReader(new InputStreamReader(System&period;in))
流 JAVA /IO 基本小结通过一行常见的代码讨论:new BufferedReader(new InputStreamReader(System.in)) /*** *** 看到这篇文章挺好的, ...
Jmeter（四）-断言/检查点
断言就类似LoadRunner中的检查点.对上一个请求返回的信息,做字符串.数据包大小.HTML.XML.图片等做判断,确保返回的信息的准确性. 添加响应断言:欢迎您如果登陆页登陆成功,则后台会返回 ...
ArrayList排序算法的源码
ArrayList,排序方法的调用过程 // 排序方法 public void sort(Comparator<? super E> c) { final int expectedModC ...
MySQL学习笔记：select语句性能优化建议
关于SQL中select性能优化有以下建议,仅当笔记记录. 1.检查索引:where.join部分字段都该加上索引 2.限制工作数据集的大小:利用where字句过滤 3.只选择需要的字段:减少IO开销 ...
POJ 1050
#include <stdio.h> #include <string.h> #define mt 101 int main() { int a[mt][mt]; int st ...
微信小程序登录方案
微信小程序登录方案登录程序 app.js 调用wx.login获取code 将code作为参数请求自己业务登录接口获取session_key 存储session_key 如果有回调执行回调 App( ...
python学习笔记——高阶函数map()
满足以下两点中任意一点,即为高阶函数: 1.函数接收一个或多个函数作为参数 2.函数返回一个函数 1 描述用函数和可迭代对象中每一个元素作为参数,计算出新的迭代对象 map() 会根据提供的函数对指 ...

秒客网

$timeout, $interval

$timeout, $interval

$timeout

用法

参数

返回

方法

参数

返回

$interval

用法

参数

返回

方法

参数

返回

例子

随机推荐

相关文章