如何取消 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() { 

    t = setInterval( func(){}, 3000); 

} 

function stop() { 

    clearInterval(t); 

} 

Answer 2

AngularJs 有自己的间隔服务：$interval :文档

你可以这样使用它：

const downloadTimer = $interval(() => $scope.timer(), 1000);

对于取消：

$interval.cancel(downloadTimer);

同样在 HTML 中，您必须为变量添加绑定：

 <p> Ur gonna loged out in <span id="countdowntimer">{{timeleft}}</span> seconds</p>

在此处查看工作演示：DEMO