如果页面上没有活动,如何自动刷新HTML？

Question

我有一个网站,我想自动刷新,如果用户没有在特定时间(即180秒)使用它.有没有办法自动刷新HTML只有在页面上没有活动？

谢谢!

Answer 1

两种方法:

1.使用每秒一次的计时器和"超时"值.

您可能希望将其包装在一个对象中:

var activityHandler = (function() {
    var timerHandle = 0,
        timeout;

    flagActivity();

    function start() {
        stop();
        flagActivity();
        timerHandle = setInterval(tick, 1000);
    }

    function stop() {
        if (timerHandle != 0) {
            clearInterval(timerHandle);
            timerHandle = 0;
        }
    }

    function flagActivity() {
        timeout = new Date() + 180000;
    }

    function tick() {
        if (new Date() > timeout) {
            stop();
            location.reload();
        }
    }

    return {
        start:        start,
        stop:         stop,
        flagActivity: flagActivity
    };
})();

然后在页面加载时启动它:

activityHandler.start();

每当你看到"活动"时ping它:

activityHandler.flagActivity();

例如,你可以这样做:

if (document.addEventListener) {
    document.addEventListener('mousemove', activityHandler.flagActivity, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmousemove', activityHandler.flagActivity);
}
else {
    document.onmousemove = activityHandler.flagActivity;
}

2.使用每次"活动"时重置的计时器.

这不是正在进行的工作(我们每秒都没有发生任何事情),但是当您标记该活动时,会发生更多工作.

设置计时器进行刷新:

var handle = setTimeout(function() {
    location.reload();
}, 180000);

...然后在您看到任何您认为是"活动"的任何时候取消并重新安排:

clearTimeout(handle);
handle = setTimeout(...);

你可以将它包装在一个函数中:

var inactivityTimerReset = (function() {
    var handle = 0;

    function reset() {
        if (handle != 0) {
            clearTimeout(handle);
        }
        handle = setTimeout(tick, 180000);
    }

    function tick() {
        location.reload();
    }

    return reset;
})();

// Kick start
inactivityTimerReset();

// ...and anywhere you see what you consider to be activity, call it
// again
inactivityTimerReset();

然后,再次,在每个活动上ping它.但这比我在mousemove处理程序中放置的工作要多得多,因此上面的解决方案#1.