如何在一定的时间内停止刷新页面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>

如果您将措辞更改为“更新节目内容”而不是重新加载或刷新（通常与浏览器操作相关联），则可能会更清楚。 – 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); 
}

一旦用户再次激活，我如何重置计时器？ – lostInTheTetons

您可以将'document.ready'函数中的所有代码（示例中的第一个函数）提取到它自己的命名函数中。这样，你可以在任何你想要的地方再次通过名称调用该函数。 –

因此，只需将第一个函数分解成它自己的函数，然后从timer = setInterval函数获得它自己的函数？然后在第二个函数中调用第一个函数？ – lostInTheTetons

答

您可以在几个不同的方式实现这一目标。首先，我假定你已经有了逻辑来检查一个人是否已经空闲5分钟（因为这使得回答这个更容易，：D）

你可以做什么是当你调用setInterval时，存储它的结果在一个变量中。如果用户在5分钟内变为空闲，则window.clearInterval（thatVariable）结束循环。

否则，改变你的逻辑来改用setTimeout，只要用户没有闲置5分钟，就递归调用自己。毫秒的指定次数后

所以像这样的东西？ 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米。此外，由于页面正在刷新，超时将始终在页面加载时设置。

他不是做一个重新加载。他正在'刷新''#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);

如何在一定的时间内停止刷新页面javascript

相关推荐