如何取消 setInterval 函数？

Question

首先：我是 angularjs 或 js 的新手。所以也许我的代码中有一个愚蠢的错误。

所以这是关于：我试图构建一个简单的注销模板，它将在 10 秒后注销您。还有两个按钮，一个用于直接注销，一个用于取消注销。

我的问题：如果你只是让时间过去，倒计时不会在 10 秒后停止。因此，出于某种原因，“clearInterval”方法不起作用。如果您使用其中一个按钮取消间隔，它会起作用。

因此，该方法似乎在取消和 clearInterval 之后仍然计数。

<div class='container' ng-app="myAssesmentApp" ng-controller="logoutController" >

    <h1>Logout</h1>

    <br>

    <form>

        <div class='form-group'>

            <p> Ur gonna loged out in <span id="countdowntimer">10 </span> seconds</p>

        </div>

        <button type='submit' class='btn btn-primary' ng-click ="logout()" id="close">Okay log me out</button>

        <button type='submit' class='btn btn-primary' ng-click ="cancelLogout()" id="dont">i dont wanna get loged out</button>

        </form>

 </div>

JS：

    myAssesmentApp.controller('logoutController', ['$scope', 'userService', '$state', function ($scope, userService, $state) {

        $scope.timeleft = 10;

        var downloadTimer = setInterval($scope.timer, 1000);

        $scope.timer = function ()

      {

      $scope.timeleft--;

      document.getElementById("countdowntimer").textContent = $scope.timeleft;

      if ($scope.timeleft <= 0) 

      {

           $scope.stop();

      }

    };

    $scope.stop = function()

        {

            clearInterval(downloadTimer);

             $scope.logout();

        }

    $scope.cancelLogout = function () 

        {

            clearInterval(downloadTimer);

            $state.go('main.projectstate');

            $scope.dynamicView = false;

        };

        $scope.logout = function () {

            clearInterval(downloadTimer);

            userService.benutzer = '';

            userService.password = '';

            $scope.logedIn = false;

     };

    }]);

所以它应该做的是在 10 秒后重置并取消整个方法。

我知道我不是最好的英语演讲者，但我希望你理解我的问题 :) 在此先感谢！

Answer 1

这非常简单直接。有一个内置的方法clearInterval()来取消/清除间隔。这是示例代码片段，function fun() {&nbsp;&nbsp; &nbsp; t = setInterval( func(){}, 3000);&nbsp;}&nbsp;function stop() {&nbsp;&nbsp; &nbsp; clearInterval(t);&nbsp;}&nbsp;

Answer 2

AngularJs 有自己的间隔服务：$interval&nbsp;:文档你可以这样使用它：const&nbsp;downloadTimer&nbsp;=&nbsp;$interval(()&nbsp;=>&nbsp;$scope.timer(),&nbsp;1000);对于取消：$interval.cancel(downloadTimer);同样在 HTML 中，您必须为变量添加绑定：&nbsp;<p>&nbsp;Ur&nbsp;gonna&nbsp;loged&nbsp;out&nbsp;in&nbsp;<span&nbsp;id="countdowntimer">{{timeleft}}</span>&nbsp;seconds</p>在此处查看工作演示：DEMO