How to stop the setTimeout counter from another function call through button click

Question

I am creating an sample application, user signout time is 15 minutes. Before 2 minute, users gets an pop with warning message with countdown. There are two buttons.

Logout => for logout.
StayLogin => get additional 15 minutes time into the application.

For the first time , when user reaches 13 minutes, gets the popup.
So when click the proceed button, logout time gets added .

Problem :
The problem with the counter. If counter reaches 0 seconds 0 minutes it have redirect to login page.
In between the counter, user clicked, added another 15 minutes, but timer reaches 0 seconds and go to the login page.

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();
  }
}

How to stop the counter when click the stayLogin button?

Possible duplicate of [How to stop a setTimeout loop?](http://stackoverflow.com/questions/8443151/how-to-stop-a-settimeout-loop) — Dekel, Dec 16 '16 at 15:54
@Dekel i have set the ClearTimeout, return false for the certain function in button call nothing works, in background the counter is running. — Mohamed Sahir, Dec 16 '16 at 15:56
You did, but you are not using it correctly :) Check the other post — Dekel, Dec 16 '16 at 15:57
@ Dekel Thanks ,countdown problem is over , but another problem is arised.looking for your answer.[link](http://stackoverflow.com/questions/41197707/how-to-stop-an-multiple-setinterval-in-angular-based-application) — Mohamed Sahir, Dec 17 '16 at 10:45

score 1 · Answer 1 · answered Dec 16 '16 at 16:36

You need to use something like

$timeout.cancel(timer)

to cancel the timer and recreate a new one.

Have a look at how I would do it below.

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>

i am handling this process is inside angular run block,angular run block doesn't support ng-hide and show. — Mohamed Sahir, Dec 16 '16 at 19:15

score 0 · Answer 2 · answered Dec 16 '16 at 15:58

0

You need to pass clearTimeout a variable that references the setTimeout, rather than the callback function. e.g.

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

Why not return the setTimeout form your tick function?

answered Dec 16 '16 at 15:58

AndFisher

633
1
5
18

You need to expose a variable that holds the `setTimeout` that is in scope to both functions – AndFisher Dec 16 '16 at 16:09
i have tried to clearTimeOut its not clearing,Because of countdown is in separate block and button function call is in separate block. just for [Demo ]:(https://jsfiddle.net/ddu0oLd5/3/) – Mohamed Sahir Dec 16 '16 at 16:09
1

As stated in the answer, you are passing the wrong variable to `clearTimeout()`. Pass the return value of `setTimeout` to the `clearTimeout` – AndFisher Dec 16 '16 at 16:12

How to stop the setTimeout counter from another function call through button click

2 Answers2