ボタンをクリックして別の関数呼び出しからsetTimeoutカウンタを停止する方法

サンプルアプリケーションを作成しています。ユーザーサインアウト時間は15分です。 2分前に、ユーザーはカウントダウンで警告メッセージをポップアップします。 2つのボタンがあります。ボタンをクリックして別の関数呼び出しからsetTimeoutカウンタを停止する方法

1）ログアウト=>ログアウト。
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ボタンをクリックするとカウンターを停止する方法はありますか？

出典

2016-12-16 Mohamed Sahir

の可能性のある重複した[のsetTimeoutループを停止する方法？]（http://stackoverflow.com/questions/8443151/how-to-stop-a-settimeout-loop） – Dekel

@Dekel私はClearTimeoutを設定し、バックグラウンドでカウンタが動作している場合、何も動作しないボタンコールで特定の関数に対してfalseを返します。 –

あなたはしましたが、正しく使用していません:)他の投稿を確認してください – Dekel

コールバック関数ではなく、setTimeoutを参照する変数をclearTimeoutに渡す必要があります。例えば

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

なぜsetTimeoutを返さないあなたtick機能を形成しますか？

出典

2016-12-16 15:58:30 AndFisher

両方の機能のスコープ内にある 'setTimeout'を保持する変数を公開する必要があります – AndFisher

私はclearTimeOutそれはクリアではありません。カウントダウンは別のブロックにあり、ボタンの呼び出しは別のブロックにあります。 [Demo]の場合：（https://jsfiddle.net/ddu0oLd5/3/） –

答えに記載されているとおり、間違った変数を 'clearTimeout（）'に渡しています。 'setTimeout'の戻り値を' clearTimeout'に渡します。 – AndFisher

あなたはタイマーをキャンセルし、新しいものを再作成する

$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>

出典

2016-12-16 16:36:43 Alok

私はこのプロセスを処理していますが、角度実行ブロック内にあり、角度実行ブロックはng-hideとshowをサポートしていません。 –

ボタンをクリックして別の関数呼び出しからsetTimeoutカウンタを停止する方法

答えて

関連する問題