如何通过单击按钮从另一个函数调用中停止 setTimeout 计数器答案

【问题标题】：How to stop the setTimeout counter from another function call through button click如何通过单击按钮从另一个函数调用中停止 setTimeout 计数器
【发布时间】：2016-12-16 15:52:54
【问题描述】：

我正在创建一个示例应用程序，用户注销时间为 15 分钟。在 2 分钟之前，用户会收到带有倒计时的警告消息的弹出消息。有两个按钮。

注销 => 用于注销。
StayLogin => 获得额外 15 分钟进入应用程序的时间。

第一次，当用户达到 13 分钟时，获取弹出窗口。
因此，当单击继续按钮时，会添加注销时间。

问题：
柜台的问题。如果计数器达到 0 秒 0 分钟，它会重定向到登录页面。
在计数器之间，用户单击，又增加了 15 分钟，但计时器达到 0 秒并转到登录页面。

function countdown(minutes) {
  var seconds = 60;
  var mins = minutes

  function tick() {
    var counter = document.getElementById("timer");
    var current_minutes = mins - 1
    seconds--;
    counter.innerHTML =
      current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
    if (seconds === 0) {
      $state.go("root"); // problem
    }
    if (seconds > 0) {
      setTimeout(tick, 1000);
    } else {
      if (mins > 1) {
        alert('minutes');
        // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
        setTimeout(function() {
          countdown(mins - 1);
        }, 1000);
      }
    }
  }
  tick();
}
countdown(1); * *

// staylogin

$rootScope.proceed = function() {
  var lastDigestRun = Date.now();
  var s = lastDigestRun + 3 * 60 * 1000;
  var displaytime = now - lastDigestRun > 3 * 60 * 1000;
  if (now - lastDigestRun > 2 * 60 * 1000) {
    clearTimeout(tick);
    load();
  }
}

点击stayLogin按钮时如何停止计数器？

【问题讨论】：

How to stop a setTimeout loop?的可能重复
@Dekel 我已经设置了 ClearTimeout，为按钮调用中的某个函数返回 false 无效，在后台计数器正在运行。
你做了，但你没有正确使用它:) 检查其他帖子
@Dekel 谢谢，倒计时问题已经结束，但是又出现了一个问题。寻找你的答案。link

标签： javascript jquery angularjs javascript-objects dom-events

【解决方案1】：

你需要使用类似的东西

$timeout.cancel(timer)

取消计时器并重新创建一个新计时器。

看看下面我会怎么做。

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

app.controller('MainCtrl', function($scope, $timeout, $interval) {
  $scope.name = 'MyConfusedUser';
  $scope.firstLoad = true;
  $scope.loggingOut = false;
  $scope.loggOutIn = 5;
  $scope.loggingOutIn = 10;
  $scope.maxLoginTime = 10;
  
  $scope.getTimer = function(seconds){
    return $timeout(function(){
      alert('you are logged out');
    }, seconds * 1000);
  } 
  $scope.resetTime = function(){
    $timeout.cancel($scope.currentTimer); 
    $scope.currentTimer = $scope.getTimer($scope.maxLoginTime);
    $scope.loggingOutIn = $scope.maxLoginTime;
    $scope.loggingOut = false;
  }
  if($scope.firstLoad){
    $scope.firstLoad = false;
    $interval(function(){
      $scope.loggingOutIn--;
      if($scope.loggingOutIn < $scope.loggOutIn){
        $scope.loggingOut = true;
      }
    }, 1000, 0);
    
    $scope.timers = [];
    $scope.currentTimer = $scope.getTimer($scope.maxLoginTime);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <body ng-app="myApp" ng-controller="MainCtrl">
    <div ng-hide="loggingOut">
      <p>Hello {{name}}!</p>
    </div>
    <div ng-show="loggingOut">
      <p>{{name}}, you will be logged out very soon.</p>
    </div>
    <p>Logging out in {{loggingOutIn}} seconds</p>
    <p ng-show="loggingOut"><button ng-click="resetTime()">Reset Time</button></p>
  </body>

【讨论】：

我正在处理这个过程在角度运行块内，角度运行块不支持 ng-hide 和显示。

【解决方案2】：

您需要传递clearTimeout 一个引用setTimeout 的变量，而不是回调函数。例如

var to = setTimeout(function(){...});
clearTimeout(to);

为什么不从tick 函数中返回setTimeout？

【讨论】：

您需要公开一个变量，该变量包含两个函数范围内的setTimeout
我试图清除TimeOut它没有清除，因为倒计时在单独的块中，按钮函数调用在单独的块中。只为 [Demo ]:(jsfiddle.net/ddu0oLd5/3)
如答案中所述，您将错误的变量传递给clearTimeout()。将setTimeout的返回值传递给clearTimeout