Question

我在我的网站上运行此脚本以显示来自我的网络摄像头的图像。图像在5秒后刷新，但我希望此功能在30秒后停止，因此我不会浪费太多带宽。我怎么能这样做？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Reload iframe for every 5 seconds</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
setInterval(refreshiframe, 5000);
});
function refreshiframe() {
$('#testframe').attr('src', $('#testframe').attr('src'));
}
</script>
</head>
<body>
<div>
<iframe id="testframe" src="http://50.21.204.200/snapshot.jpg" width="640px" height="480px"></iframe>
</div>
</body>
</html>

谢谢

Answer 1

setTimeout与setInterval类似，只是它只调用一次回调。

使用setTimeout将回调排队30秒，以clearInterval停止第一个间隔：

var intervalID = setInterval(refreshiframe, 5000);

setTimeout(function () { clearInterval(intervalID); }, 30000);

Answer 2

您可以跟踪自启动以来经过的时间，如果超出时间，则不会开始下一次超时。

$(function() {
   var start = new Date().getTime();

   function run() {
       refreshiframe();
       // if we haven't exceeded 30 seconds, schedule the next refresh
       if ((new Date()).getTime() - start < (30 * 1000)) {
           setTimeout(run, 5000);
       }
   }
   // do the first one
   setTimeout(run, 5000);

   function refreshiframe() {
       $('#testframe').attr('src', $('#testframe').attr('src'));
   }
});

或者，您可以只保留一个计数器，只刷新一定次数，然后在该次数后取消该间隔：

$(function() {
   var cntr = 0;

   var interval = setInterval(function() {
       refreshiframe();
       // if we've already done the max number of refreshes, 
       //    then cancel the interval
       if (++cntr > 6) {
           clearInterval(interval);
       }
   }, 5000);

   function refreshiframe() {
       $('#testframe').attr('src', $('#testframe').attr('src'));
   }
});

x秒后停止jquery函数

2 个答案: