脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS定时器

AngularJS定时器的使用与移除操作方法【interval与timeout】

 更新时间：2016年12月14日 10:26:07   作者：小小小小小亮  
这篇文章主要介绍了AngularJS定时器的使用与移除操作方法,结合实例形式分析了AngularJS中interval与timeout方法的相关使用技巧,需要的朋友可以参考下

本文实例讲述了AngularJS定时器的使用与移除操作方法。分享给大家供大家参考，具体如下：

1.相比较于JS中setTimeInterval和setTimeout，AngularJS中通过interval来实现定时器的效果，通过timeout来实现时间延迟。

$timeout //实现的是延迟执行
$interval //实现的是定时器的效果

我们分别来看这两个服务

（1）timeout

timeout相当于JS原生里面的延迟执行，不同的是该服务的函数返回的是一个promise对象。

var timer=$timeout(function(){
   console.log('hello world')
},2000);  //该函数延迟2秒执行
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};

（2）interval

interval与timeout服务大同小异，创建定时器返回的也是一个promise对象。

var timer=$interval(function(){
   console.log('hello world')
},2000);  //间隔2秒定时执行
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};

2.如何移除定时器

在angularJSo中，特别是在页面切换或者说是路由切换的时候，我们需要移除响应的定时器，我们可以通过on方法，监听路由切换时间。当DOM结构发生变化时，会执行on方法：

$scope.$on('destroy',function(){
  $interval.cancel($scope.timer);
}) //在控制器里，添加$on函数

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • angular ng-model 无法获取值的处理方法

    angular ng-model 无法获取值的处理方法

    今天小编就为大家分享一篇angular ng-model 无法获取值的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS ngModel实现指令与输入直接的数据通信

    AngularJS ngModel实现指令与输入直接的数据通信

    这篇文章主要介绍了AngularJS ngModel实现指令与输入直接的数据通信的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS基础 ng-value 指令简单示例

    AngularJS基础 ng-value 指令简单示例

    本文主要介绍AngularJS ng-value 指令,这里对ng-value 的基础资料做了整理，并附实例代码，有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS语法详解（续）

    AngularJS语法详解（续）

    本文续上文，接着介绍AngularJS语法，和上文一样，都是通过示例来向大家分析说明，非常不错的一篇文章，推荐给大家。
    2015-01-01
  • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

    AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

    这篇文章主要介绍了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法,结合实例形式分析了AngularJS使用ng-Cloak来解决初始化时出现闪烁问题的相关技巧,需要的朋友可以参考下
    2016-11-11
  • Angular.JS通过指令操作DOM的方法

    Angular.JS通过指令操作DOM的方法

    这篇文章主要给大家介绍了Angular.JS通过指令操作DOM的方法，文中给出了详细的介绍和示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • 详解angular路由高亮之RouterLinkActive

    详解angular路由高亮之RouterLinkActive

    这篇文章主要介绍了详解angular路由高亮之RouterLinkActive，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 浅谈angularJS中的事件

    浅谈angularJS中的事件

    下面小编就为大家带来一篇浅谈angularJS中的事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • AngularJS Module方法详解

    AngularJS Module方法详解

    AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的
    2015-12-12
  • 简单谈谈关于Angular Cli打包的事

    简单谈谈关于Angular Cli打包的事

    使用过angular2人都应该知道，angular2提供的Angular CLI来快速搭建，快速生成serives、component、derective、modulet各种模板...下面这篇文章主要给大家介绍了关于Angular Cli打包的一些事，需要的朋友可以参考下。
    2017-09-09

最新评论