CODEWITHSUNDEEP
javascriptjquerysetinterval
zilcuanu
zilcuanu

Reputation: 3715

checking for browser inactivity in javascript

I have written the javascript to alert if there is no activity on the browser for 4 seconds. If there is no browser events, then a dialog box should appear asking to extend the session. If there is no events for 4 seconds, the notification should go away. If the user clicks the continue session then the counter should be reset and check for inactivity. The code is below. On page load, it is working correctly but once there is some activity, this script is not working. Where am I going wrong?

var countDownDate = dateAdd(new Date(), 4);
var flag = false;

var x = setInterval(function() {
  callFun(countDownDate);
}, 1000);


var contin = function() {
  flag = true;
  document.getElementById("dialogBox").style.display = "none";
  document.getElementById("demo").style.display = "block";
}

function dateAdd(date, units) {
  var ret = new Date(date);
  ret.setTime(ret.getTime() + units * 1000);
  return ret;
}

var callFun = function(countDownDate) {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance <= 0) {
    document.getElementById("demo").style.display = "none";
    clearInterval(x);
    document.getElementById("dialogBox").style.display = "block";

  }
}

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) {
  countDownDate = dateAdd(new Date(), 4);
  flag = true;
});

if (flag) {
  var z = setInterval(function() {
    alert('will logout now....');
    document.getElementById("dialogBox").style.display = "none";
    clearInterval(z);
  }, 8000);
}
body {
  margin: 0px;
  padding: 0px;
}

#main {
  margin: 0px auto;
  padding: 0px;
  width: 900px;
  position: relative;
}

pre {
  background: #F8F8D2;
  padding: 10px;
  border: 2px solid #673E3E;
  border-radius: 3px;
  color: #222222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="main">
    <p id="demo"></p>
    <div id="dialogBox" style="display:none;">
      <h3>Do you want to be logged in?</h3>
      <button value="Continue" onclick="contin();">Continue</button>
      <button value="Logout">Logout</button>
    </div>


  </div>
</body>

Upvotes: 0

Views: 84

Answers (3)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Hope the below solution helps. When the dialog is displayed, I check for another 3 seconds for activity, if no activity, then I call logout function. Changes are made to contin, callFun and logout functions.

var countDownDate = dateAdd(new Date(), 4);
var flag = false;
var idleInterval, buttonInterval;

var x = setInterval(function () {
	callFun(countDownDate);
}, 1000);

var contin = function () {
	flag = true;
	document.getElementById("dialogBox").style.display = "none";
	document.getElementById("demo").style.display = "block";
	document.getElementById("demo").innerHTML = "0m 0s";
	clearInterval(idleInterval);
	buttonInterval = setInterval(function () {
		callFun(countDownDate);
	}, 1000);
}

function dateAdd(date, units) {
	var ret = new Date(date);
	ret.setTime(ret.getTime() + units * 1000);
	return ret;
}

var callFun = function (countDownDate) {
	// Get todays date and time
	var now = new Date().getTime();

	// Find the distance between now an the count down date
	var distance = countDownDate - now;

	var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
	var seconds = Math.floor((distance % (1000 * 60)) / 1000);

	// Display the result in the element with id="demo"
	document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

	clearInterval(idleInterval);

	// If the count down is finished, write some text 
	if (distance <= 0) {
		document.getElementById("demo").style.display = "none";
		document.getElementById("dialogBox").style.display = "block";
		clearInterval(x);
		clearInterval(buttonInterval);
		flag = false;

		idleInterval = setInterval(logOut, 3000);
	}
}

function logOut() {
	if (!flag){
		console.log("Log out");
		document.getElementById("dialogBox").style.display = "none";
		clearInterval(idleInterval);
	}

}

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function (x1) {
	countDownDate = dateAdd(new Date(), 4);
	flag = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
	body {
		margin: 0px;
		padding: 0px;
	}

	#main {
		margin: 0px auto;
		padding: 0px;
		width: 900px;
		position: relative;
	}

	pre {
		background: #F8F8D2;
		padding: 10px;
		border: 2px solid #673E3E;
		border-radius: 3px;
		color: #222222;
	}
</style>

 <div id="main">
	<p id="demo"></p>
	<div id="dialogBox" style="display:none;">
		<h3>Do you want to be logged in?</h3>
		<button value="Continue" onclick="contin();">Continue</button>
		<button value="Logout">Logout</button>
	</div>
</div>

Upvotes: 1

Haroldo_OK
Haroldo_OK

Reputation: 7230

You forgot to restart the interval after having stopped it.

var countDownDate = dateAdd(new Date(), 4);
var flag = false;

var x = setInterval(function() {
  callFun(countDownDate);
}, 1000);


var contin = function() {
  flag = true;
  document.getElementById("dialogBox").style.display = "none";
  document.getElementById("demo").style.display = "block";
  countDownDate = dateAdd(new Date(), 4); 

  var flag = false;

  var x = setInterval(function() {
    callFun(countDownDate);
  }, 1000);
}

function dateAdd(date, units) {
  var ret = new Date(date);
  ret.setTime(ret.getTime() + units * 1000);
  return ret;
}

var callFun = function(countDownDate) {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance <= 0) {
    document.getElementById("demo").style.display = "none";
    clearInterval(x);
    document.getElementById("dialogBox").style.display = "block";

  }
}

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) {
  countDownDate = dateAdd(new Date(), 4);
  flag = true;
});

if (flag) {
  var z = setInterval(function() {
    alert('will logout now....');
    document.getElementById("dialogBox").style.display = "none";
    clearInterval(z);
  }, 8000);
}
body {
  margin: 0px;
  padding: 0px;
}

#main {
  margin: 0px auto;
  padding: 0px;
  width: 900px;
  position: relative;
}

pre {
  background: #F8F8D2;
  padding: 10px;
  border: 2px solid #673E3E;
  border-radius: 3px;
  color: #222222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="main">
    <p id="demo"></p>
    <div id="dialogBox" style="display:none;">
      <h3>Do you want to be logged in?</h3>
      <button value="Continue" onclick="contin();">Continue</button>
      <button value="Logout">Logout</button>
    </div>


  </div>
</body>

Upvotes: 0

Q10
Q10

Reputation: 981

Seems like you need to call your "callFun" function again with a new date in your "contin" function.

Upvotes: 0

Related Questions