当用户在页面 javascript 或 php 中不活动 3 分钟时自动注销答案

【问题标题】：Automatically log out while user inactive for 3 minutes in a page javascript or php当用户在页面 javascript 或 php 中不活动 3 分钟时自动注销
【发布时间】：2018-06-21 17:41:31
【问题描述】：

我创建了一个选项卡 A、B、C。每个选项卡都有一个 html 页面。如果我单击第一个选项卡，我已经为自动注销设置了超时功能（javascript）。如果我单击第二个选项卡，则会运行相同的超时功能。但我想停止/重置第一个选项卡计时器。

function timeout(){
	var IDLE_TIMEOUT = 60; //seconds
	var _idleSecondsTimer = null;
	var _idleSecondsCounter = 0;

	document.onclick = function() {
	    _idleSecondsCounter = 0;
	};

	document.onmousemove = function() {
	    _idleSecondsCounter = 0;
	};

	document.onkeypress = function() {
	    _idleSecondsCounter = 0;
	};

	_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

	function CheckIdleTime() {
	     _idleSecondsCounter++;
	    
	    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
	        window.clearInterval(_idleSecondsTimer);
	        alert("Time expired!");
	        document.location.href = "logout.php";
	    }
	}
}

function opentab1(){
     document.getElementById("tab1").innerHTML='<object type="text/html" data="tab1.php" ></object>';
}

function opentab2(){
     document.getElementById("tab2").innerHTML='<object type="text/html" data="tab2.php" ></object>';
}

function opentab3(){
     document.getElementById("tab3").innerHTML='<object type="text/html" data="tab3.php" ></object>';
}
function opentab4(){
     document.getElementById("tab4").innerHTML='<object type="text/html" data="tab4.php" ></object>';
}

<body>
<div class="tab1" onload="timeout()" onclick="opentab1()">
</div>
<div class="tab2"  onload="timeout()" onclick="opentab2()">
</div>
<div class="tab3"  onload="timeout()" onclick="opentab3()">
</div>
<div class="tab4"  onload="timeout()" onclick="opentab4()">
</div>

// loading an php file using on click function
<div class="container" id="tab1"></div>
<div class="container" id="tab2"></div>
<div class="container" id="tab3"></div>
<div class="container" id="tab4"></div>


</body>

提前致谢。请指导。

【问题讨论】：

试着把var _idleSecondsTimer = null放在timeout()函数的外面

标签： javascript php html css

【解决方案1】：

你可以使用 setTimeout()。

clearTimeout() 方法清除使用 setTimeout() 方法设置的计时器。

setTimeout() 返回的 ID 值作为 clearTimeout() 方法的参数。

注意：要能够使用 clearTimeout() 方法，必须在创建超时方法时使用全局变量：

Syntax:
    myVar = setTimeout("javascript function", milliseconds);

然后，如果该函数尚未执行，您将能够通过调用 clearTimeout() 方法来停止执行。

Example:

var myVar;

function myFunction() {
   myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}


 In your case: 
  window.timeout1 = setTimeout(function() {
        _idleSecondsCounter++;
        if (_idleSecondsCounter >= IDLE_TIMEOUT) {
             window.clearInterval(_idleSecondsTimer);
             alert("Time expired!");
             document.location.href = "logout.php";
        }
  }, 1000);

 function stopTimeout1() {
        clearTimeout(window.timeout1);
 }

【讨论】：

【解决方案2】：

您可以在单击新选项卡时停止计时器，方法是编辑您的方法并停止当前计时器然后启动新的计时器。

您可以从 div 中删除 onload

<div class="tab1" onload="timeout()" onclick="opentab1()">

到

<div class="tab1" onclick="opentab1()">

然后在您检索标签内容的函数中，例如opentab1() 像下面的函数一样编辑它们

function opentab2(){
     //clear the previous timer
     clearInterval(interval_name);

     //start a new timer
     timeout();

     document.getElementById("tab2").innerHTML='<object type="text/html" data="tab2.php" ></object>';
}

【讨论】：