Question

我正在尝试使用ajax刷新div。代码本身已经实现并正在运行。我希望div每隔30秒刷新一次，但只能在活动选项卡上刷新。根据我的理解，无论选项卡是否正在使用，setInterval都会每次刷新。我喜欢将setenter（或其他一种暗示用户在网站上处于活动状态的用户交互）与setInterval结合使用，以便setInterval在不活动时不会被触发。

目前我有这个代码在初始页面加载时效果很好。在前30秒内没有刷新，在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

只需设置鼠标光标位于所需选项卡中的时间间隔，并在外部时将其清除：

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一样。

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

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

如何将setInterval与mouseenter结合起来？

3 个答案: