javascript - clearTimeout(timer) 后重启定时器

Question

clearTimeout(timer) 后如何重新启动另一个函数？

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

如果可能的话，我想保留最上面的函数 refreshTable()。

Codepen 演示

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

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

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