Today I was writing a javascript to check whether there is a
user activity on the page or not. Thought of putting the same to blog so that
some on else can use of it.
Here is the code for it......
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script>
//Assinging the setInterval for function time() for every 1 seconds, used to show time
var myVar = setInterval(function () { time() },
1000);
//assinging the setInterval for function reset() for every 5 seconds, used to reload page
var myVarReset = setInterval(function () { reset() },
5000);
//Function to show the time and will be update in nevery
second
function time() {
var d = new Date();
var t = d.toLocaleTimeString();
$('#time').text(t);
}
//Function to reload the page which is set to call every 5
seconds using setInterval
function reset()
{
location.reload();
alert("Reset");
}
//Handling the onmousemove event of the form
window.onmousemove=function()
{
//clering the setInterval for function reset()
clearInterval(myVarReset);
//Againg assinging the setInterval for function
reset() for every 5 seconds
myVarReset =
setInterval(function () { reset() }, 5000);
}
</script>
<text id="time"></text>
So how does this code works?
First of all we need to understand what does setInterval and clearInterval
does?
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Tip: 1000 ms = 1 second.
Tip: To execute a function only once, after a specified number of milliseconds, use the setTimeout() method.
Let’s look into the
ode in detail……………….
var myVar = setInterval(function () { time() },
1000);
var myVarReset = setInterval(function () { reset() },
5000);
In this part we are using setInterval to set two functions “time” and “reset”, one for showing the current time on the page and the other for reloading the page if there is no user activity for 5 seconds. The output of these factions are assigned to variable myVar and myVarReset respectively.
function time() {
var d = new Date();
var t = d.toLocaleTimeString();
$('#time').text(t);
}
This part is responsible to show the current time on the
page , which will be called every 1 second
as defined by the above setInterval
function reset()
{
location.reload();
alert("Reset");
}
This function just reloads the page
window.onmousemove=function()
{
clearInterval(myVarReset);
myVarReset =
setInterval(function () { reset() }, 5000);
}
Here we handle the onmousemove on the page and resets the setinterval for reset() function using the clearInterval by passing variable myVarReset.
Once it is reset , the function reset() is again set to call eve very 5 seconds using setInterval.
