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中的时间

    两类 绝对时间 [NSDate date].CFAbsoluteTimeGetCurrent(),或者gettimeofday(). 返回的是从某一个时刻开始,度过的秒数.会随着用户设置的系统时间更改 ...

  2. AVAudioSession初探

    根据文档,AudioSession规定了app和系统音频行为交互的规范,一个app只有一个AudioSession的单例. app通过设置自己AudioSession的单例的属性来告诉系统自身想达到的 ...

  3. svn（http）

    对于有些公司的运维  他确实很垃圾   所以  你一定要谨记这一点!!!

  4. Java中用内存映射处理大文件

    在处理大文件时,如果利用普通的FileInputStream 或者FileOutputStream 抑或RandomAccessFile 来进行频繁的读写操作,都将导致进程因频繁读写外存而降低速度.如 ...

  5. Microsoft.Owin.Hosting 实现启动webapp.dll

    Microsoft.Owin.Hosting 下面是 asp.net core 实现 using System;using System.Collections.Generic;using Syste ...

  6. MySql技巧个人笔记

    1.数据null时sum的用法 mysql数据库SUM(A+B)不一定等于SUM(A)+SUM(B),当A或B为NULL时,SUM(A+B)=NULL. 2.or改为in 同一字段,将or改写为in( ...

  7. PKG_COLLECTION_LHR 存储过程或函数返回集合类型

    存储过程或函数可以返回集合类型,方法很多,今天整理在一个包中,其它情况可照猫画虎. CREATE OR REPLACE PACKAGE PKG_COLLECTION_LHR AUTHID CURREN ...

  8. 0001 Oracle数据库安装

    从这个月初开始学习Oracle,因为完全是零起步,就从Oracle的下载安装开始一点一点学起,今天把系统重新做了,就再安装了一遍Oracle11gR2,把安装过程记录一下: 一.安装Oracle数据库 ...

  9. jQuery简单入门（五）

    5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...

  10. Hyper-V 上的android

    为了各种实验环境,装了Hyper-V,然后ADT的android虚拟机就用不上Intel的HAXM了,慢得不行.只有想办法在Hyper-v上装android,还得要ADT能连上. 半天下来,终于搞定. ...