clearTimeout(timer) 后重启定时器

Restart timer after clearTimeout(timer)

clearTimeout(timer)后如何重启另一个函数?

我让 refreshTable() 函数在 7 秒不活动(无鼠标移动事件)后停止。客户端不活动后移动鼠标可以重新刷新吗?

最上面的函数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()});

目标如下图所示。

我建议您有一个函数负责启动超时,一个函数负责停止超时。试试这个:

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