Having issues setting up a timeout session on my webpage

Question

I am working on an application which requires to logout itself after certain amount of time, if user is not active on the page. I am using azure authentication token, and it expires in One hour. Now here I am trying to setup two timers, first timer will run every one min and will keep on resetting itself with every mouse action, and the 2nd timer should load after 58 mins of inactive, showing there are only 120 seconds remaining in the session. I am unable to get desired the functionality, the first timer runs after 1 min, but simultaneously it also kicks of the second timer.

Here's my Javascript code..

<script>

    function timerModal() {
        var count = 120;
        console.log("This has started");
        var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

        function timer() {

            count = count - 1;
            if (count <= 0) {

                $(this).mousemove(function (e) {
                    count = 120;
                });
                $(this).keypress(function (e) {
                    count = 120;
                });
                clearInterval(counter);
                //vmsWebUtils.signOut();  //counter ended, do something here
                return;
            }

            document.getElementById("timer").innerHTML = count + " "; // watch for spelling
            console.log(count);
        }


    }

    var idleTime = 0;

    $(document).ready(function () {
        //Increment the idle time counter every minute.

        var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
        //Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        if (idleTime => 57) { // 57 minutes
            $("#sessionTimeout").show();
                 timerModal();
        }
        console.log(idleTime);
    }


</script>

See here: http://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly — couzzi, May 17 '17 at 18:51

score 0 · Answer 1 · answered May 17 '17 at 18:58

I required the same effect for a site once, here is the code if it helps. (it's set to immediately show the prompt for testing purposes)

$('input').keypress(function(e) {
    if (e.which == 13) {

        $(this).next('input').focus();
        e.preventDefault();
    }
 resetlogout();
});
$('textarea').keypress(function(e) {
 resetlogout();
});

var autolog1 = setTimeout("logmeoutmsg()", 1);
var autolog = setTimeout("logmeout()", 10000);

function logmeout() {
 window.location.href = "index.php?logout=1";
}

function logmeoutmsg() {
 $("#logoutmsg").show(); 
 var count=10;
 var counter=setInterval(timer, 1000); //1000 will  run it every 1 second
 timer();
 function timer()
 {
 $("#counterdown").html(count);
   count=count-1;
   if (count <= 0)
   {
   clearInterval(counter);
   return;
   } 

 }
}

function resetlogout() {
 clearTimeout(autolog1);
 clearTimeout(autolog);
 autolog1 = setTimeout("logmeoutmsg()", 1);
 autolog = setTimeout("logmeout()", 10000);
 $("#logoutmsg").hide(); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="logoutmsg" style="display:none;position:fixed;left:50%;top:100px;margin-left:-400px;border:1px solid #2e2e2e;width:800px;background:#eedbba;padding:10px 0px;">
 <div style="width:760px;margin-left:20px;text-align:center;">
 You will be logged out in <div style="display:inline-block;" id="counterdown"></div> seconds.<br><input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Cancel">
 <input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Logout">
 </div>
</div>

score 0 · Accepted Answer · answered May 17 '17 at 20:23

I fixed it my self with some modifications, here's the modified code !! Works perfectly fine!!

<script>
    var idleTime = 0;
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });

    function timerIncrement() {
        idleTime = idleTime + 1;
        console.log(idleTime);
        if (idleTime > 2) { // 57 minutes
            clearInterval(idleInterval);
            timerModal();
            console.log("hello");
        }
        console.log(idleTime);
   }

    function timerModal() {
        var count = 120;
        console.log("This has started");
        var counter = setInterval(timer, 1000); //1000 will  run it every 1 second
        function timer() {
            count = count - 1;
            if (count <= 0) {
                clearInterval(counter);

                vmsWebUtils.signOut();  //counter ended, do something here
                return;
            }
            document.getElementById("timer").innerHTML = count + " "; // watch for spelling
            console.log(count);
        }
    }

</script>

Having issues setting up a timeout session on my webpage

2 Answers2