php - 如何结合 setInterval 和 mouseenter？

Question

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

目前我有这段代码，它在初始页面加载时运行良好。前 30 秒没有刷新，直到 mouseenter 在 div 上也没有刷新。然而，在最初的 30 秒后，它会在每次鼠标输入时刷新。

$(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.

});

Answer 1

只需要设置鼠标光标在你想要的tab里面的时间间隔，在外面就清除:

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 .