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. NSString和SwiftString的区别和使用场景

    当下Swift项目已经越来越多,可能会经常见到  str as NSString 或者 str as String 字符串在这两者之间的来回切换,因为有些操作用OC字符串比较方便,而有些操作则相反,熟 ...

  2. JavaScript上传图片及时预览

    /*******************************正面图片上传预览开始****************************/        function previewImage ...

  3. IOS开发之功能模块--给任意的UIView添加点击事件

    前言:好久没写博客,今天来一波.我在实际项目开发中,会遇到这样功能需求:我已经搭好了iOS的UI界面,但是很多界面的子View用了UIView,然后这些UIView中用了UILabel和UIImage ...

  4. Mac OS 解压缩软件：StuffIt Expander

    由于今天下载一份文档,是在rar压缩包里,mac os系统默认是不支持RAR格式文件的解压的.在app store里找了下,找到一个免费的解压软件,名字叫:StuffIt Expander. 该软件由 ...

  5. “vmware tools 只能虚拟机中安装”的解决方法

    vmware安装的一个大坑,最近在开发上需要用到centos 6.4,由于我本身的系统是win8所以决定使用虚拟机,选择了vmware,并且从网上下载的虚拟机的映像文件.中间安装了vmware8,安装 ...

  6. JAVA 8 Optional类介绍及其源码

    什么是Optional对象 Java 8中所谓的Optional对象,即一个容器对象,该对象可以包含一个null或非null值.如果该值不为null,则调用isPresent()方法将返回true,且 ...

  7. Java Gradle入门指南之gretty插件（安装、命令与核心特性）

        Java Web应用开发时常使用Gradle来进行项目管理,可以十分便利地解决包依赖等问题.war插件的出现,让项目部署成为一个复制粘贴的过程,那有没有办法让Java web应用的部署,就像w ...

  8. java中的list,set,数组之间的转换

    使用该工具类import org.apache.commons.collections.CollectionUtils; 在Apache Jakarta Commons Collections中 St ...

  9. Oracle12c安装出错

    Database Configuration Assistant安装失败 向广大园友求助

  10. Kafka三款监控工具比较(转)

    在之前的博客中,介绍了Kafka Web Console这 个监控工具,在生产环境中使用,运行一段时间后,发现该工具会和Kafka生产者.消费者.ZooKeeper建立大量连接,从而导致网络阻塞.并且 ...