CODEWITHSUNDEEP
javascriptjqueryrefreshrestartcleartimeout
Kerry7777
Kerry7777

Reputation: 4574

Restart timer after clearTimeout(timer)

How can another function be restarted after clearTimeout(timer)?

I have the refreshTable() function stop after 7 seconds of inactivity (no mousemove event). Can the refresh be restarted when client moves the mouse after inactivity?

The top function refreshTable() I would like to leave as is if possible.

Codepen demo

//====DONT EDIT THIS FUNCTION IF POSSIBLE====
function refreshTable() {
    window.clearTimeout(timer);
    timer = window.setTimeout(refreshTable, 5000);
    $("body").append("<p>refreshTable every 5 seconds.</p>");
}
//========

var timer = window.setTimeout(refreshTable, 0);




// If theres no activity for 7 seconds do something
var activityTimeout = setTimeout(clientInActive, 7000);

function clientResetActive(){
    $("body").attr('class', 'active');   
    clearTimeout(activityTimeout);
    activityTimeout = setTimeout(clientInActive, 5000);
    //RESTART TIMER WHILE resetActive
    //????????
}

// No activity do something.
function clientInActive(){
    $("body").attr('class', 'clientInactive');
    $("body").append("<p>clientInActive</p>");
    //STOP TIMER WHILE clientInActive
    clearTimeout(timer);
}

// Check for mousemove, could add other events here such as checking for key presses ect.
$(document).bind('mousemove', function(){clientResetActive()});

Something like the image below is the goal.

enter image description here

Upvotes: 0

Views: 424

Answers (1)

jdgregson
jdgregson

Reputation: 1587

I'd suggest that you have one function in charge of starting the timeout and one in charge of stopping it. Try this:

//====DONT EDIT THIS TOP FUNCTION IF POSSIBLE====
function refreshTable() {
    stopRefreshTable();
    window.refreshTableTimer = window.setTimeout(refreshTable, 5000);
    $("body").append("<p>refreshTable every 5 seconds.</p>");
}
//====END====

function startRefreshTable() {
    if(!window.refreshTableTimer) {
        window.refreshTableTimer = window.setTimeout(refreshTable, 0);
    }
}

function stopRefreshTable() {
    if(window.refreshTableTimer) {
        self.clearTimeout(window.refreshTableTimer);
    }
    window.refreshTableTimer = null;
}

function resetActive(){
    $("body").attr('class', 'active');   
    clearTimeout(activityTimeout);
    activityTimeout = setTimeout(inActive, 5000);
    //RESTART TIMER WHILE resetActive
    startRefreshTable()
}

// No activity do something.
function inActive(){
    $("body").attr('class', 'inactive');
    $("body").append("<p>inActive</p>");
    //STOP TIMER WHILE inActive
    stopRefreshTable();
}

// If theres no activity for 7 seconds do something
var activityTimeout = setTimeout(inActive, 7000);
// Check for mousemove, could add other events here such as checking for key presses ect.
$(document).bind('mousemove', function(){resetActive()});
startRefreshTable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions