仅当没有鼠标事件时才更新页面

update a page only when there are no mouse events

本文关键字：更新 事件 鼠标      更新时间：2023-09-26

我想仅在没有鼠标事件时才更新页面，如：

function TimedRefresh(t) {
    $('#colorbox').mousemove(event) {
        if (mousemove != 0) { //(mousemove == false)
            setTimeout("location.reload(false);", t);
        }
    }
}

它当然不起作用。它被称为：

<body onload="JavaScript:TimedRefresh(5000);">

你会这样做

$('#colorbox').mousemove(function( event ) {
    clearTimeout( $(this).data('timer') );
    $(this).data('timer', setTimeout(function() {
        window.location.reload();
    }, 5000));
});

当鼠标在 #colorbox 元素内移动时，计时器将重置，如果未检测到鼠标移动，它将在 5 秒内重新加载页面。

小提琴

你需要颠倒逻辑。设置页面的计时器加载，然后在移动鼠标时清除/重新启动它。如果鼠标移动时间超过 5 秒，则页面将刷新：

$(document).ready(function() {
    var timer;
    resetTimer();
    $('#colorbox').mousemove(function() {
        resetTimer(timer);
    });
    function resetTimer() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            window.location.reload(false);
        }, 5000);
    }
});

工作示例

我认为你应该做这样的事情：

  1. 使用默认值（可能为 0）创建隐藏字段。
  2. 当某些鼠标事件被触发时，你应该改变隐藏字段的值（可能是 1）
  3. 然后，另一方面，我认为您可以使用像 setTimeout 这样的函数来比较和引用您的页面。在这里您可以阅读有关此功能的更多信息
相关文章：