Javascript 如何仅在页面上没有活动时自动刷新HTML？

我有一个网站，我想自动刷新，只有当用户在一个特定的时间（即180秒）没有使用它。有没有一种方法，自动刷新HTML，只有当一个页面上没有活动

谢谢大家!

两种方法：

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它：

例如，您可以这样做：

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

…然后取消和重新安排任何你认为是“活动”的时间：

您可以将其封装在函数中：

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

---

然后，再一次，在每一个活动上点击它。但这比我在mousemove处理程序中所做的工作要多得多，因此上面的解决方案#1。

您可以声明一个变量

pageActive

或其他什么，将其设置为false，并且每当用户执行某项操作时，将其设置为true。

---

然后，使用检查此变量的

setinterval（）

设置定期执行的函数，如果为true，则将其设置为false以再次启动，如果为false，则刷新页面。

您可以使用onblur和onfocus on body元素查看页面上是否有某种活动。

定义活动。是鼠标移动（悬停）吗？是滚动页面吗？是否使用tab键遍历表单元素和链接的tabindex？

var docTimeOut;
function bodyTimeOut()
{
    docTimeOut=setTimeout(function(){location.reload();},18000);
}

function resetTimeOut()
{
    clearTimeout(docTimeOut);
    bodyTimeOut();
}


document.onload = bodyTimeOut;

document.body.onmouseover= resetTimeOut;

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

var docTimeOut;
function bodyTimeOut()
{
    docTimeOut=setTimeout(function(){location.reload();},18000);
}

function resetTimeOut()
{
    clearTimeout(docTimeOut);
    bodyTimeOut();
}


document.onload = bodyTimeOut;

document.body.onmouseover= resetTimeOut;