Neustart-Timer nach clearTimeout (Timer)

Question

Wie kann eine andere Funktion nach clearTimeout (Timer) neu gestartet werden?

Ich habe die refreshTable() -Funktion nach 7 Sekunden Inaktivität (kein Mousemove-Ereignis) zu stoppen. Kann die Aktualisierung neu gestartet werden, wenn der Client die Maus nach der Inaktivität bewegt?

Die oberste Funktion refreshTable() möchte ich wie möglich verlassen.

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()}); 

So etwas wie das Bild unten ist das Ziel.

Answer 1

Ich würde vorschlagen, dass Sie eine Funktion in Ladung stoppen sie das Timeout und ein verantwortlicher starten. Versuchen Sie folgendes:

//====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>