如何在一定的時間內停止刷新頁面javascript

我希望我的頁面每隔一段時間重新加載一次，但如果用戶處於非活動狀態，例如5分鐘，我想停止重新加載頁面。我在http://codepen.io/tetonhiker/pen/gLeRmw上有一個例子。如何在一定的時間內停止刷新頁面javascript

現在它每10秒刷新一次。我再次希望當用戶不活動時刷新5分鐘後停止說。我怎樣才能做到這一點？

var timer = null; 
 
$(function() { 
 
    // Get the time to stop the effect 
 
    var stopTime = new Date(); 
 
    stopTime.setMinutes(stopTime.getMinutes() + 5); 
 
    // Get a reference to the timer so it can be cancelled later 
 
    timer = setInterval(function() { 
 
    // Check to see if the timer should stop 
 
    var currentTime = new Date(); 
 
    if(currentTime < stopTime){ 
 
     var randomnumber = Math.floor(Math.random() * 100); 
 
     $('#show').text(
 
     'I am getting refreshed every minute..! Random Number ==> ' + randomnumber); 
 
    } else { 
 
     // Stop the timer 
 
     clearInterval(timer); 
 
    } 
 
    }, 60 * 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="show" align="center"></div> 
 
    
 
    <div align="center"> 
 

 
    </div>

來源

2016-12-06 lostInTheTetons

如果您將措辭更改爲「更新節目內容」而不是重新加載或刷新（通常與瀏覽器操作相關聯），則可能會更清楚。 – Taplar

[Stop setInterval]可能的重複（http://stackoverflow.com/questions/16437173/stop-setinterval） –

只需設置一個變量等於定時器ID，當你的條件滿足取消：

var timer = null; 

// As soon as the document is ready: 
$(function() { 
    // Activate the timer: 
    startClock(); 
}); 

// And, when the user interacts with the page, start over 
$(document).on("mousemove click", function(){ 
    // Stop the previously running timer 
    clearInterval(timer); 

    // Start the clock over again: 
    startClock(); 
}); 

function startClock(){ 
    // Get the time to stop the effect 
    var stopTime = new Date(); 
    stopTime.setMinutes(stopTime.getMinutes() + 5); 

    // Get a reference to the timer so it can be cancelled later 
    timer = setInterval(function() { 

    // Check to see if the timer should stop 
    var currentTime = new Date(); 
    if(currentTime < stopTime){ 
     var randomnumber = Math.floor(Math.random() * 100); 
     $('#show').text("I am getting refreshed every 10 seconds..! " + 
         "Random Number ==> " + randomnumber); 
    } else { 
     // Stop the timer 
     clearInterval(timer); 
    } 
    }, 10000); 
}

來源

2016-12-06 18:27:33

一旦用戶再次激活，我如何重置計時器？ – lostInTheTetons

您可以將'document.ready'函數中的所有代碼（示例中的第一個函數）提取到它自己的命名函數中。這樣，你可以在任何你想要的地方再次通過名稱調用該函數。 –

因此，只需將第一個函數分解成它自己的函數，然後從timer = setInterval函數獲得它自己的函數？然後在第二個函數中調用第一個函數？ – lostInTheTetons

您可以在幾個不同的方式實現這一目標。首先，我假定你已經有了邏輯來檢查一個人是否已經空閒5分鐘（因爲這使得回答這個更容易，：D）

你可以做什麼是當你調用setInterval時，存儲它的結果在一個變量中。如果用戶在5分鐘內變爲空閒，則window.clearInterval（thatVariable）結束循環。

否則，改變你的邏輯來改用setTimeout，只要用戶沒有閒置5分鐘，就遞歸調用自己。毫秒的指定次數後

來源

2016-12-06 18:22:55 Taplar

所以像這樣的東西？ http://codepen.io/tetonhiker/pen/gLeRmw – lostInTheTetons

好吧我已經更新了它 – lostInTheTetons

它看起來像你在做clearInterval路線。你到底在問什麼？ – Taplar

<script type="text/javascript"> 
    setTimeout(function() { 
     location.reload(); 
    }, 60 * 1000); 
</script>

setTimeout將reload的頁面，因此，60 * 1000 =1米。此外，由於頁面正在刷新，超時將始終在頁面加載時設置。

來源

2016-12-06 18:23:42 Venkat

他不是做一個重新加載。他正在'刷新''#show'的內容。 – Taplar

一個簡單的方法是用setTimeout混合setInterval。

function refresh() { 
    var randomnumber = Math.floor(Math.random() * 100); 
    $('#show').text('I am getting refreshed every 10 seconds..! Random Number ==> ' + randomnumber); 
} 

var intervalId = setInterval(refresh, 10 * 1000); 

setTimeout(function() { 
    clearInterval(intervalId); 
    alert('refresh stop!'); 
}, 5 * 60 * 1000);

來源

2016-12-06 18:31:43 rogeriolino

如何在一定的時間內停止刷新頁面javascript

回答

相關問題