如何结合setInterval和mouseenter？

我正在努力使它与一个div刷新Ajax。代码本身已经实现并且已经工作。我希望div每30秒刷新一次，但只能在活动选项卡上刷新。根据我的理解，无论选项卡是否在使用，setInterval都会刷新。编号喜欢结合使用setInterval的mouseenter（或其他类型的暗示用户在网站上处于活动状态的用户交互），以便setInterval在不活动时不会被触发。如何结合setInterval和mouseenter？

当前我有这个代码，它在初始页面加载时效果很好。在前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. 

});

来源

2012-08-26 cwal

您在代码中有重复的代码。 –

你真正想要的是[如何判断浏览器/标签是否处于活动状态]（http://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active）（标记为重复） – Bergi

Bergi是对的。 – samura

只需设定时间间隔当鼠标光标在你想要的选项卡，清除它时，它的外面：

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。

来源

2012-08-26 15:50:19 MaxArt

这是否只在mouseenter上开始计数？这意味着游标在刷新前必须在div内保留30秒？或者如果游标进入div，并且自从上次刷新后超过30秒，它将立即在mouseenter上刷新？ – cwal

光标必须留在'＃refresh'里面30秒才能刷新。这不是你想创造的行为吗？ – MaxArt

以某种方式是。但我也希望当用户返回标签和mouseenter时，如果超过30秒，它会马上刷新。有可能@Bergi评论和链接更适合我寻找的行为。尽管你的回答对我的问题是正确的。 – cwal

试试这个：

$(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); 
});

来源

2012-08-26 15:53:06

$(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);  
     } 
    }); 
});

来源

2012-08-26 15:56:14 adeneo

如何结合setInterval和mouseenter？

回答

相关问题