AngularJS中的定时器，以及定时器的移除clear

雨点打透心脏的1/2处 2024-04-18 18:37 29阅读 0赞

1.相比较于JS中setTimeInterval和setTimeout，angularJS中通过interval来实现定时器的效果，通过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方法，监听路由切换时间。当DOM结构发生变化时，会执行on方法：

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

注意：**$destroy不是destroy**  
原文链接：https://blog.csdn.net/liwusen/article/details/52138882

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS中的定时器，以及定时器的移除clear

.相比较于JS中setTimeInterval和setTimeout，angularJS中通过interval来实现定时器的效果，通过interval来实现定时器的效果，...

雨点打透心脏的1/2处/ 2024年04月18日 18:37/ 0 赞/ 30 阅读

相关 C#中的定时器

定时器分两种，一种是阻塞方式，一种是非阻塞 @1.1：阻塞方式的定时器,调用sleep使当前线程休眠，终端无法输入字符 class Program

浅浅的花香味﹌/ 2022年08月26日 11:23/ 0 赞/ 131 阅读

相关 AngularJS之定时器（timeout）

1、问题背景 AngularJS某一时间段后，出现另一种情况，这里需要用到定时器timeout 2、实现源码 <!DOCTYPE html>

旧城等待，/ 2022年07月16日 23:10/ 0 赞/ 139 阅读

相关 AngularJS 定时器(获取当前日期)

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF

ゝ一纸荒年。/ 2022年07月12日 08:14/ 0 赞/ 167 阅读

相关 AngularJS 定时器(获取当前日期)

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF

╰半夏微凉°/ 2022年07月12日 08:14/ 0 赞/ 145 阅读

相关 angularjs周期性定时器

var app = angular.module("app"); app.controller("appController", function (

Bertha 。/ 2022年05月28日 01:54/ 0 赞/ 170 阅读

相关 Java中的简单定时器以及实例

定时器：可以让我们在指定时间内做某件事情，可以重复做某件事情依赖Timer和TimerTask这两个类 a) Timer：定时器类 i. public T

亦凉/ 2022年04月13日 12:58/ 0 赞/ 143 阅读

相关 springboot 定时器的使用以及如何停止定时器的解决方案

最近看了springboot 定时器的使用，的确非常的简单，看了很多的博客，没有给出如何停止定时器的办法，想了一个暂时解决的办法，伪停止。这里是pom.xml 所需的包

柔光的暖阳◎/ 2022年03月08日 05:22/ 0 赞/ 1517 阅读

相关 TCP中的定时器

1、建立连接定时器(connection-establishment timer) 　　顾名思义，这个定时器是在建立连接的时候使用的，我们知道， TCP建立连接需要3次

Myth丶恋晨/ 2021年11月22日 08:14/ 0 赞/ 222 阅读

相关 AngularJs 定时器/时间轴服务

时间轴服务 1、NG中也能写js语法,因为输入js范围 2、使用时需要在控制器脚本中注入 3、注入服务参数可以有多个

心已赠人/ 2021年07月24日 22:54/ 0 赞/ 366 阅读