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. 【iOS】彩色TabBar切换动画实现

    无意间看到一个彩色TabBar切换的设计图,感觉很不错,有空就把他实现了. 环境信息 Mac OS X 10.10.4 Xcode 6.4 iOS 8.4 效果图: 效果图 源码下载地址: https ...

  2. 【代码笔记】iOS-显示图片的各种方式

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UI ...

  3. HTML5气泡悬浮框(已经加上完整文件)

    源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...

  4. vs.net git版本仓库使用 之解决冲突方法 原创

    vs.net git 之解决冲突方法 如果别人已经修改推送到服务器,但自已本地未进行同部更新,那么就会出现要解决冲突的提示! 具体解决方法为: ... ... 下载word离线版:vs.net_git ...

  5. 在查询时将查询条件放入Session中，导出时直接根据qpniRGaFiler取查询条件即可

    在查询时将查询条件放入Session中,导出时直接根据qpniRGaFiler取查询条件即可

  6. mysql源码解读之事务提交过程(二)

    上一篇文章我介绍了在关闭binlog的情况下,事务提交的大概流程.之所以关闭binlog,是因为开启binlog后事务提交流程会变成两阶段提交,这里的两阶段提交并不涉及分布式事务,当然mysql把它称 ...

  7. Javascript之旅——第六站：看看writable特性

    说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是 浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有“ ...

  8. InnoDB源码分析--缓冲池（三）

    转载请附原文链接:http://www.cnblogs.com/wingsless/p/5582063.html 昨天写到了InnoDB缓冲池的预读:<InnoDB源码分析--缓冲池(二)> ...

  9. python极客学院爬虫V1

    定向爬取极客学院视频,原本只有年费VIP只能下载,经过分析,只要找个免费体验VIP即可爬取所有视频 涉及的基本技术:python xpath 正则 com+ 通过python调用迅雷从组件,实现自动创 ...

  10. [转载] Linux启动过程详解-《别怕Linux编程》之八

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket.为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. = ...