angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行.

如果需要取消一个timeout,调用$timeout.cancel(promise)方法.

用法:

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

fn: 回调函数(必填)

delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以后就执行.比如当页面被渲染完成后.

invokeApply: 布尔值.是否需要进行脏值检测(非必填),不填默认为false,如果设置为true,则fn回调会被包在$scope.$apply()中执行

返回值: 返回一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve.resolve的值就是fn回调函数的返回值

方法:

$timeout.cancel([promise])

promise: 一个由$timeout()所创建的promise对象.(非必填).调用cancel()以后,这个promise对象就会被reject.

返回值: 如果$timeout()的回调还没有被执行,那就取消成功.返回true

下面来简单的测试一下:

      var timeoutApp = angular.module('timeoutApp',[]);

      timeoutApp.run(function($timeout){

          var a = $timeout(function(){

              console.log('执行$timeout回调');

              return 'angular'

          },1000);

          a.then(function(data){

              console.log(data)

          },function(data){

              console.log(data)

          });

          //$timeout.cancel(a);

      })

运行以后看到控制台打印:

执行$timeout回调

angular

如果我打开注释,执行.cancel()方法,那么$timeout的回调就不会被执行,它返回的promise被reject,控制台打印:

canceled

下面做个很实用的小demo: 延迟下拉菜单: 鼠标放到button上的时候,延迟500毫秒显示下拉菜单,当鼠标离开button的时候,延迟500毫秒隐藏下拉菜单,如果鼠标是进入了下拉菜单部分,那么就不隐藏下拉菜单.如果鼠标离开了下拉菜单,延迟500毫秒隐藏下拉菜单,如果鼠标是进入了button,那么还是不隐藏下拉菜单

html:

<!DOCTYPE html>

<html ng-app="timeoutApp">

<head>

    <title>$timeout服务</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="../bootstrap.css"/>

    <script src="../angular.js"></script>

    <script src="script.js"></script>

    <style type="text/css">

    * {

      font-family:'MICROSOFT YAHEI'

    }

    </style>

</head>

<body >

  <div ng-controller="myCtrl">

      <div class="dropdown" dropdown >

          <button class="btn btn-default dropdown-toggle" type="button" ng-mouseenter = "showMenu()" ng-mouseleave = "hideMenu()">

              Dropdown

              <span class="caret"></span>

          </button>

          <ul class="dropdown-menu" ng-show="ifShowMenu" ng-mouseenter = "showMenu()" ng-mouseleave = "hideMenu()">

              <li><a href="#">Action</a></li>

              <li><a href="#">Another action</a></li>

              <li><a href="#">Something else here</a></li>

              <li><a href="#">Separated link</a></li>

          </ul>

      </div>

  </div>

</body>

</html>

js:

var timeoutApp = angular.module('timeoutApp',[]);

timeoutApp.controller('myCtrl',function($scope){

    $scope.ifShowMenu = false;

});

timeoutApp.directive('dropdown',function($timeout){

    return {

        restrict:"EA",

        link:function(scope,iele,iattr){

            scope.showMenu = function(){

                $timeout.cancel(scope.t2);

                scope.t1 = $timeout(function(){

                    scope.ifShowMenu = true

                },500)

            };

            scope.hideMenu = function(){

                $timeout.cancel(scope.t1);

                scope.t2 = $timeout(function(){

                    scope.ifShowMenu = false

                },500)

            };

        }

    }

})

代码应该很好理解: 就是进入button和进入ul下拉菜单的时候,都定义一个timeout回调(过500毫秒以后显示下拉菜单),同时取消隐藏下拉菜单的回调.而离开button和ul的时候相反.

参考原文: http://docs.angularjs.cn/api/ng/service/$timeout

代码地址: https://github.com/OOP-Code-Bunny/angular/tree/master/%24timeout

angularjs之$timeout指令的更多相关文章

  1. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  2. [转]你知道用AngularJs怎么定义指令吗？--很详细

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  3. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  4. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  5. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  6. AngularJS中Directive指令系列 - scope属性的使用

    文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...

  7. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  8. angularJS之使用指令封装DOM操作

    angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...

  9. AngularJS创建新指令 - 基本功能

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init  ...

随机推荐

  1. Android 开源框架Universal-Image-Loader完全解析（三）---源代码解读

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/39057201),请尊重他人的辛勤劳动成果,谢谢! 本篇文章 ...

  2. android加固系列—1.如何检验so文件是否加壳成功

    程序对so文件加壳后,如何验证是否加壳成功呢,首先除了能在应用中正常运行外,还要用IDA来检测: 绿色乱码表示rr这个函数成功加密: 工具下载,可支持动态调试版:

  3. android post带数据请求方式，传递的数据格式包括json和map

    如下: public static String httpPost(String url, String json) { try { URL u = new URL(url); HttpURLConn ...

  4. objective-c系列-NSMutableArray

    ******************************************** // 可变数组构造方法 //  下边两句的定义都是不可变的 //    NSMutableArray *mar ...

  5. 【Android】神奇的android:clipChildren属性

    前言 前几天有在微博上推荐过一个博客,看他文章时发现了这个属性.有些属性不常用,但需要的时候非常有用,于是做了个例子,正好项目用到,与大家分享一下. 声明 欢迎转载,请注明出处! 博客园:http:/ ...

  6. 我的android学习经历9

    给android的activity添加背景图片 1.你可以在网上下载android的图片,也可以制作自己的图片,图片的后缀为.png,也就是png格式的图片(注意图片的大小要适合你的手机屏幕或者AVD ...

  7. iOS之 APNs全新的APNs苹果15年WWDC大会上的干货

    记得14年在dl某大学校招上现场面试iOS时候被问到了APNs也就是苹果的推送问题,当时我表示一脸懵逼,因为当时还没有真正接触做过项目也就了解了个大概,总之当时回答的一塌糊涂!后来回去就在网上仔细查了 ...

  8. iOS 申请测试用的远程推送证书

    进入member center创建一个App ID 注意下面证书名字的变化 将刚刚生成的两个证书下载下来,双击安装 安装完成后可以在钥匙串中查看 这样远程推送证书的申请流程就走完了

  9. Sandcastle----强大的C#文档生成工具

    最近客户索要产品的二次开发类库文档,由于开发过程中并没有考虑过此类文档,而且项目规范比较,持续时间比较长,经手人比较多,还真是麻烦,如果人工制作文档需要是一个比较大的工程.还好有这个文档生成工具,能够 ...

  10. JAVA 8 方法引用 - Method References

    什么是方法引用 简单地说,就是一个Lambda表达式.在Java 8中,我们会使用Lambda表达式创建匿名方法,但是有时候,我们的Lambda表达式可能仅仅调用一个已存在的方法,而不做任何其它事,对 ...