Javascript to detect whether user is viewing the page

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.

http://www.w3schools.com/jsref/met_win_setinterval.asp

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.