Angular JS中$timeout的用法及其与window.setTimeout的区别

$timeout的用法

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的时候相反。

Angular中$timeout与window.setTimeout的区别

1. 在$timeout中传入的函数会被包含在try...catch中,并且在异常时将异常交给$exceptionHandler

2. window.setTimeout返回的是数字id,可以通过window.clearTimeout(id)取消,而$timeout返回的是promise对象,要取消要用$timeout.cancel(返回的promise对象)。

3. $timeout传入的function会更新作用域内的数据绑定,也就是说在function中对$scope的修改会触发更新,而window.setTimeout中对$scope的修改不会触发更新。当然$timeout有第三个参数,默认为true,如果传入false,则不会更新当前作用域的数据绑定。

时间: 2024-04-25 19:56:48

Angular JS中$timeout的用法及其与window.setTimeout的区别的相关文章

angular.js的$timeout

angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]); fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以

angular.js的路由和模板在asp.net mvc 中的使用

我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.asp.net mvc 的路由是通过不同的URL到不同的controller然后交给controller去呈现视图.但是在angular.js则是需要提前指定一个module(ng-app),然后去定义路由规则,通过不同的URL,来告诉ng-app 去加载哪个页面.再渲染到ng-view.通过angular.js路由的使用,可以很容易实现页面的局部刷新.更加高效的去创建

Angular Js总结(一)

创建自定义指令 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp", []);app.directive("runoobDirectiv

Angular JS 学习之服务(Service)

1.AngularJS中,可以创建自己的服务,或使用内建服务: 2.在AngularJS中,服务是一个函数或对象,可在你的AngularJS应用中使用: AngularJS内建了30多个服务:有个$location服务,它可以返回当前页面的URL: var app=angular.module('myApp',[]); app.controller('customersCtrl',function($scope,$location){ $scope.myUrl=$location.absUrl(

Angular.js中处理页面闪烁的方法详解

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象

Angular.js初步认知

第一部分  Angular.js简介 Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足. 注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,但是两者却不是一个概念. 类库: 指一些函数的集合,封装一些可复用的代码块,但是类库本身需要开发者主动调用各种方法才能实现功能,如jQuery等. 框架: 指一种特殊的,已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码

Node.js开发入门—Stream用法详解

Stream是Node.js中非常重要的一个模块,应用广泛.一个流是一个具备了可读.可写或既可读又可写能力的接口,通过这些接口,我们可以和磁盘文件.套接字.HTTP请求来交互,实现数据从一个地方流动到另一个地方的功能. 所有的流都实现了EventEmitter的接口,具备事件能力,通过发射事件来反馈流的状态.比如有错误发生时会发射"error"事件,有数据可被读取时发射"data"事件.这样我们就可以注册监听器来处理某个事件,达到我们的目的. Node.js定义了R

angular.js的依赖注入解析

本教程使用AngularJS版本:1.5.3        angularjs GitHub: https://github.com/angular/angular.js/        AngularJs下载地址:https://angularjs.org/ 用有过spring的人都知道,Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJS的service其实就是用到了这里的