Question

以下javascript代码每10秒自动刷新一次页面。

我的问题是如何在mousemove和keypress上重置计时器。

的Java脚本

<script type="text/javascript" language="JavaScript">

        var secs;
        var timerID = null;
        var timerRunning = false;
        var delay = 1000;

        function InitializeTimer(seconds) {
            //length of the timer, in seconds
            secs = seconds;
            StopTheClock();
            StartTheTimer();
        }

        function StopTheClock() {
            if (timerRunning)
                clearTimeout(timerID);
            timerRunning = false;
        }

        function StartTheTimer() {
            if (secs == 0) {
                StopTheClock();
                window.location.href = window.location.href;
            }
            else {
                document.getElementById("lbltime").innerText = secs + " ";
                secs = secs - 1;
                timerRunning = true;
                timerID = self.setTimeout("StartTheTimer()", delay);
            }
        }
</script>

提前谢谢。

Answer 1

在我看来，你的代码似乎有点过于分支，我会做的是简化它。

window.refreshTimeout = null;

function refreshPage(){
  location.reload();
}

function refresh(){
  clearTimeout(window.refreshTiemout);
  window.refreshTimeout = setTimeout(refreshPage, 2000)
}

window.refreshTimeout = setTimeout(refreshPage, 2000)
window.addEventListener('mousemove', refresh)

<h4>HelloWorld</h4>

正如您所看到的，您将一个事件监听器附加到窗口以进行鼠标移动（您也可以附加其他人），在此窗口中取消之前的超时并开始一个新的超时。最初你当然会开始超时。

Answer 2

如果我理解正确，就像这样（非常基本的例子：在mousemove和keypress上重置计时器）：

var elem = document.getElementById("timer"), timeout, startTimer = function timer() {
    elem.textContent++;
    timeout = setTimeout(timer, 1000)
}
function resetTimer() {
    // here you reset the timer...
    clearTimeout(timeout);
    elem.textContent = -1;
    startTimer();
    //... and also you could start again some other action
}
document.addEventListener("mousemove", resetTimer);
document.addEventListener("keypress", resetTimer);
startTimer();

<span id="timer">-1</span> - Move cursor or press a key to reset timer.

正如我猜的，如果页面上有一些用户活动，您希望延迟页面重新加载。在reload()函数中，您只需检查计时器的值是否达到限制（如60秒）。如果是，请执行重新加载。但请注意，处理mousemove事件会使浏览器的选项卡具有较高的CPU使用率，例如，如果我刚开始快速移动光标。您可能希望选择一些重要区域并在相应元素上设置处理程序。例如，keypress事件只能在评论表单上收听，或mousemove只能在菜单或文章中收听。

PS。另请考虑that

按下某个键时会触发按键事件，该键通常会产生一个字符值

因此，如果用户按下，例如ctrl或alt，则不会触发该事件。

在mousemove和keypress上重置计时器

2 个答案: