CODEWITHSUNDEEP
javascriptjquerytimer
Ayman
Ayman

Reputation: 75

Reset timer on mousemove and keypress

The below javascript code auto refresh the page every 10 sec.

My question is how can I reset the timer on mousemove and keypress.

Java-Script

<script type="text/javascript" language="JavaScript">

        var secs;
        var timerID = null;
        var timerRunning = false;
        var delay = 1000;

        function InitializeTimer(seconds) {
            //length of the timer, in seconds
            secs = seconds;
            StopTheClock();
            StartTheTimer();
        }

        function StopTheClock() {
            if (timerRunning)
                clearTimeout(timerID);
            timerRunning = false;
        }

        function StartTheTimer() {
            if (secs == 0) {
                StopTheClock();
                window.location.href = window.location.href;
            }
            else {
                document.getElementById("lbltime").innerText = secs + " ";
                secs = secs - 1;
                timerRunning = true;
                timerID = self.setTimeout("StartTheTimer()", delay);
            }
        }
</script>

Thank you in advance.

Upvotes: 0

Views: 4820

Answers (2)

curveball
curveball

Reputation: 4505

If I understood you correctly, something like this (really basic example: the timer is reset on mousemove and keypress):

var elem = document.getElementById("timer"), timeout, startTimer = function timer() {
    elem.textContent++;
    timeout = setTimeout(timer, 1000)
}
function resetTimer() {
    // here you reset the timer...
    clearTimeout(timeout);
    elem.textContent = -1;
    startTimer();
    //... and also you could start again some other action
}
document.addEventListener("mousemove", resetTimer);
document.addEventListener("keypress", resetTimer);
startTimer();
<span id="timer">-1</span> - Move cursor or press a key to reset timer.

As I guess, you want to delay page reloading if there was some user activity on the page. In your reload() function you just need to check, if timer's value reached the limit (like 60 seconds). If yes, execute reloading. However, notice, that handling mousemove event can make browser's tab have high CPU usage, if, for example, I just start to move my cursor quickly. You might want to pick some important areas and set handlers on the corresponding elements. For example, keypress event can be listened to only on a comment form or mousemove can be listened to only on a menu or on an article.

PS. Also take into account that

The keypress event is fired when a key is pressed down, and that key normally produces a character value

so, if user presses, for example, ctrl or alt the event will not be fired.

Upvotes: 1

Andrei Ungureanu
Andrei Ungureanu

Reputation: 21

Your code seems a bit too branched out in my opinion, what I would do is simplify it a bit.

window.refreshTimeout = null;

function refreshPage(){
  location.reload();
}

function refresh(){
  clearTimeout(window.refreshTiemout);
  window.refreshTimeout = setTimeout(refreshPage, 2000)
}

window.refreshTimeout = setTimeout(refreshPage, 2000)
window.addEventListener('mousemove', refresh)
<h4>HelloWorld</h4>

As you can see, you attach an event listener to the window for a mouse move (you can attach others too) within which you cancel the previous timeout and start a new one. Initially you of course start a timeout.

Upvotes: 1

Related Questions