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. unbuntu apahce 2 设置 多域名

    1.找到apache2 的设置路径 默认的apache的路径为/etc/apache2/ 2. 修改httpd.conf 本文192.168.0.1 为自己的服务器的ip,下面一样的意思 Server ...

  2. Java中“==”与equals方法的区别

    1. 用“==”比较两个变量,如果两个变量是基本类型变量,且都是数值类,则值相等就返回true 如果两个变量是引用型变量,则两个对象的地址一样,即指向同一个对象,则返回true 2.equals:St ...

  3. Android studio修改Logcat颜色

    Android studio默认的Logcat配色不利于阅读,我们可以修改自定义自己的颜色配置

  4. Android 从Gallery获取图片

    本文主要介绍Android中从Gallery获取图片 设计项目布局 <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  5. 安卓下如何使用JUnit进行软件测试

    软件测试作为程序员必备的一项技能是决定软件开发周期长短以及软件运行成败的关键,可以说好的软件不是代码写得好而是有效的测试决定的.本文将介绍在android下利用eclipse进行开发时如何使用JUni ...

  6. iOS 在xib或storyboard里为控件添加圆角、外框和外框颜色

    如果要在xib和storyboard里为控件添加圆角和外框宽度,只要这样做就可以 layer.borderWidth     设置外框宽度属性 layer.cornerRadius    设置圆角属性 ...

  7. eclipse maven 插件 安装 和 配置

    eclipse 安装插件的方式最常见的有两种: 离线安装,用 link 的方式来安装,这种方式可拔性更好,可以随时将插件插上和拔下,非常方便.  link 离线安装 eclipse maven 插件 ...

  8. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  9. System.Drawing.Image在Save之后Type变了

    前段时间发现asp.net MVC 3附带了一个相当方便的图片处理类WebImage,常用的图片处理功能全都包括进去了,用起来是相当的爽. 在项目中刚好有相关的图片处理需求,但由于实际项目是使用asp ...

  10. yii2 rbac权限控制详细操作步骤

    作者:白狼 出处:http://www.manks.top/article/yii2_rbac_description本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 ...