代码之家 › 专栏 › 技术社区 › Nicoleta Wilskon

基于$interval.timer中传递的ID取消$interval.cancel

clearinterval setinterval timer angularjs

Nicoleta Wilskon · 技术社区 · 5 年前

在下面给出的代码中,我们正在呼叫 startTimer 功能,我们使用的地方 $interval 触发对后端的请求,直到 data.status == "complete" ;一旦状态完成,我们设置 flag = true 旗子会触发手表,它会调用 $scope.stop 用于取消计时器的函数 $interval.cancel .

但这里出现了问题,即, $interval.取消 不知道该先停止哪个计时器。

当有多个请求根据ID调用计时器时,基于该ID完成的计时器应被取消。

所以我的问题是 如何根据ID取消计时器 .

angular.module('timerApp', ['timerApp.controllers']);
angular.module('timerApp.controllers', []).controller('timerController', ['$scope', '$interval',
    function($scope, $interval) {
        var timer;
        var time = 10;
        $scope.countdown = time;
        $scope.startTimer = function(id) {
            timer = $interval(function(id) {
                $scope.countdown--;
                //res is response from my backend
                someRestService(id).then(res);
                var data = res;
                if (data.status = "complete") {
                    $scope.timerFlag = true;
                }
            }, 15000);

        };

    }
    $scope.stopTimer = function() {
        $interval.cancel(timer);
    };

    $scope.$watch() {
        if ($scope.timerFlag == true) {
            $scope.stopTimer();

        }

    }
]);

脚本:

 RestapiHit/627 
 RestapiHit/628
 RestapiHit/629

它将调用627请求并完成该过程,然后在即将取消使用时 $interval.cance l它是最新的,取消629而不是627

1 回复 | 直到 5 年前

Shashank Vivek 5 年前

看一看:

angular.module('timerApp', ['timerApp.controllers']);
angular.module('timerApp.controllers', []).controller('timerController', ['$scope', '$interval',
    function($scope, $interval) {
        var timer= {} ;
        var time = 10;
        $scope.countdown = time;
        $scope.startTimer = function(id) {
            timer[id] = $interval(function(id) {
                $scope.countdown--;
                //res is response from my backend
                someRestService(id).then(res);
                var data = res;
                if (data.status = "complete") {
                    $scope.stopTimer(id);
                }
            }, 15000);

        };

    }
    $scope.stopTimer = function(id) {
        $interval.cancel(timer[id]);
        delete timer[id];
    };

]);

现在,你只有一个 timer 在控制器级别声明时分配的值。但既然,你可能有多个电话 $interval 所以我认为这种方法应该更有效。

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前