如何結合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？

回答

相關問題