clearTimeout（定时器）后重启计时器

Question

如何在clearTimeout（定时器）之后重新启动另一个功能？

我让refreshTable（）函数在7秒不活动后停止（没有mousemove事件）。当客户端在不活动后移动鼠标时，是否可以重新启动刷新？

top函数refreshTable（）我想尽可能保留。

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

如下图所示是目标。

Answer 1

我建议你有一个负责启动超时的功能和一个负责停止它的功能。试试这个：

＆＃13;

＆＃13;

//====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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;