如何将 setInterval 与 mouseenter 结合使用？答案

【问题标题】：how to combine setInterval with mouseenter?如何将 setInterval 与 mouseenter 结合使用？
【发布时间】：2012-08-21 07:37:35
【问题描述】：

我正在尝试使用 ajax 刷新 div。代码本身已经实现并且已经运行。我希望 div 每 30 秒刷新一次，但仅在活动选项卡上。据我了解，无论选项卡是否正在使用，setInterval 都会每次刷新。我想将 mouseenter（或暗示用户在网站上处于活动状态的某种其他类型的用户交互）与 setInterval 结合起来，这样 setInterval 在不活动时不会被触发。

目前我有这段代码在初始页面加载时效果很好。在前 30 秒内没有刷新，在 div 上的 mouseenter 之前也没有刷新。但是，在最初的 30 秒后，它会在每次 mouseenter 时刷新。

$(document).ready(function(){

    $("#container").hide();
    $("#loading").show();
    $("div#refresh").load('example.com/load.php', function(){ $("#container").show(); $("#loading").hide(); });

    function refresh() {
        $("#refresh").mouseenter(function() {
        //  $("#container").hide();
            $("#loading").show();
            $("div#refresh").load('example.com/load.php', function(){ $("#container").show(); $("#loading").hide(); });
        });
        clearInterval(intervalID);
    }

    var intervalID = setInterval(refresh, 30000); // Will alert every 30 second.
    // clearInterval(intervalID); // Will clear the timer.

});

【问题讨论】：

您的代码中有重复的代码。
你真正想要的是How to tell if browser/tab is active（标记为重复）
@Šime Vidas 对于重复的代码，如果您谈论刷新功能的内部和外部，它就在那里，以便它在初始页面加载时加载。如果我忽略它，页面不会刷新，直到 30 秒和 mouseenter
@cwal：是的，但它仍然是重复的代码。只需调用refresh() 而不是重复代码....

标签： php javascript jquery ajax refresh

【解决方案1】：

只要设置鼠标光标在你想要的标签内的时间间隔，在外面就清除：

var intervalID, lastRefresh = 0;
$("#refresh").mouseenter(function() {
    var diff = new Date().getTime() - lastRefresh;
    intervalID = setTimeout(function() {
        refresh();
        intervalID = setInterval(refresh, 30000);
    }, 30000 - diff);
}).mouseleave(function() {
    clearInterval(intervalID);
});

function refresh() {
    $("#loading").show();
    $("div#refresh").load('example.com/load.php',
            function(){ $("#container").show(); $("#loading").hide(); });
    lastRefresh = new Date().getTime();
}

现在<div> 会在鼠标进入其边界的那一刻刷新，并且从那一刻起每 30 秒刷新一次。当鼠标离开<div> 时停止。

如果鼠标再次进入，它会检查最后一次调用refresh 函数。如果不到 30 秒，它会等到 30 秒过去。

专业提示：clearInterval 也会清除setTimeout 生成的定时事件，就像clearTimeout 取消setInterval。

【讨论】：

这是否仅开始对 mouseenter 进行计数？意味着光标必须在 div 内停留 30 秒才能刷新？或者如果光标进入 div 并且距离上次刷新超过 30 秒，它会立即在 mouseenter 上刷新？
光标必须在#refresh 内停留 30 秒才能刷新。这不是您想要创建的行为吗？
在某种程度上是的。但我也希望当用户返回选项卡和 mouseenter 时，如果超过 30 秒，它会立即刷新。 @Bergi 评论和链接可能更适合我正在寻找的行为。虽然你的回答对我的问题是正确的。

【解决方案2】：

试试这个：

$(document).ready(function(){
    var intervalID;
    $("#container").hide();
    $("#loading").show();
    $("div#refresh").load('example.com/load.php', function(){ $("#container").show(); $("#loading").hide(); });

function refresh() {
        //  $("#container").hide();
            $("#loading").show();
            $("div#refresh").load('example.com/load.php', function(){ $("#container").show();     $("#loading").hide(); });
    }

 $("#refresh").mouseenter(function() {
     intervalID= setInterval(refresh, 30000); 
  });

$("#refresh").mouseleave(function() {
  clearInterval(intervalID);
 });

【讨论】：

【解决方案3】：

$(function(){
    var intervalID;
    $("#container").hide();
    refresh();

    function refresh() {
        $("#loading").show();
        $("div#refresh").load('example.com/load.php', function(){
            $("#container").show(); 
            $("#loading").hide(); 
        });
    }
    $("#refresh").on({
        mouseenter: function() {
            intervalID = setInterval(refresh, 30000);
        },
        mouseleave: function() {
            clearInterval(intervalID);    
        }
    });
});

【讨论】：