angular $timeout定时取消

本文介绍了一个使用AngularJS实现的定时加载数据的功能。通过定义一个名为'myCtrl'的控制器来控制数据的加载与显示。该示例展示了如何在特定的时间间隔内更新数据,并在需要时取消数据加载。
<script>

var timeout = [];

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
 
   $scope.load_studio= function(studio)
    {
     $scope.studio = obj;
        console.log('hello');
       timeout[studio.id] =  $timeout(function(){$scope.load_studio(studio);}, 10000);

    }
    $scope.toggle_load = function(studio)
    {
         if(studio.show == 1)
        {
            $scope.load_studio(studio);
        }
        else
        {
            if (timeout[studio.id])
              $timeout.cancel(timeout[studio.id]); //如果当前时间已经有一个timeout在开启,那么先取消掉这个开    启的timeout 

        }
    
   }
    var obj = {}
   obj.id = 1000;
   obj.name = 'movie a';
   obj.time= 'two hours';
   obj.show = 1;//开始
 $scope.toggle_load(obj);
obj.show = 0;//结束
$scope.toggle_load(obj);
});
</script>



AngularJS 中,`$interval`、`$timeout`、`common`、`$http` 和 `$q` 是核心服务,各自具有特定的用途和功能。这些服务可以协同工作,以实现复杂的应用逻辑。 ### `$interval` `$interval` 服务用于周期性地执行某个函数,类似于 JavaScript 的 `setInterval`。它通常用于需要定期更新或检查状态的任务。 ```javascript $interval(function() { // 执行某些操作 }, 1000); ``` ### `$timeout` `$timeout` 服务用于延迟执行某个函数,类似于 JavaScript 的 `setTimeout`。它常用于处理异步操作或延迟执行某些任务。 ```javascript $timeout(function() { // 执行某些操作 }, 1000); ``` ### `common` AngularJS 并没有一个名为 `common` 的内置服务。可能是对模块化开发中常见工具函数的误解。开发者通常会创建自定义服务来封装通用功能,例如数据格式化或日志记录[^4]。 ### `$http` `$http` 服务用于发起 HTTP 请求,与服务器进行通信。它返回一个承诺(Promise),可以使用 `.then()` 方法处理响应数据。 ```javascript $http.get('/api/data') .then(function(response) { // 处理成功响应 }) .catch(function(error) { // 处理错误 }); ``` ### `$q` `$q` 服务用于处理异步操作,提供类似 Promise 的接口。它允许开发者创建和管理异步任务,并通过 `.then()` 和 `.catch()` 方法处理结果。 ```javascript var deferred = $q.defer(); deferred.promise.then(function(result) { // 处理成功结果 }); deferred.resolve('成功'); ``` ### 是否可以混用? 是的,这些服务可以混用。例如,`$timeout` 或 `$interval` 可以与 `$http` 结合使用,以实现定时从服务器获取数据的功能。同样,`$q` 可以与 `$http` 配合,以更好地管理复杂的异步操作链。 ```javascript $interval(function() { $http.get('/api/data') .then(function(response) { // 更新数据 }); }, 5000); ``` ### 相关问题 1. AngularJS 中如何使用 `$q` 实现多个异步操作的顺序执行? 2. `$interval` 和 `$timeout` 在 AngularJS 中的底层实现机制是什么? 3. 如何在 AngularJS 中结合 `$http` 和 `$q` 管理复杂的异步请求? 4. `$interval` 是否会影响应用性能?如何优化其使用?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值