Question

<html>
<head>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {

setTimeout(function() { window.location.reload(); }, 2000); // 2 seconds, e.g.


});
</script>

<script>
    $("#siteloader")
        .html('<object data="http://www.mysite.co.uk"/>');
</script>


</head>
<body>
<div> 
<object type="text/html" data="http://www.mysite.co.uk" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
</object>
</body>
</html>

我有上面的代码将网站加载到div中，并每2秒刷新一次页面。我想要一个停止/启动刷新功能的按钮。我尝试过几种不同的方法，但似乎都没有。我的javascript知识很少，所以我希望我的编码不是太糟糕！

Answer 1

你走了：

<script type="text/javascript">
var timeout;
$(document).ready(function () {
  timeout = setTimeout(function() { window.location.reload(); }, 2000); // 2 seconds, e.g.
  $("#siteloader").html('<object data="http://www.mysite.co.uk"/>');
});

function stopReload() {
  clearTimeout(timeout);
}

</script>

此外，您可以添加一个按钮或类似的任何内容来停止超时：

<a onclick="stopReload();">Stop it!</a>

编辑：

要再次启动它，请更改以下代码：

<script type="text/javascript">
var timeout;
$(document).ready(function () {
  startReload(); //NEW PART
  $("#siteloader").html('<object data="http://www.mysite.co.uk"/>');
});

function stopReload() {
  clearTimeout(timeout);
}
function startReload() {
  timeout = setTimeout(function() { window.location.reload(); }, 2000); // 2 seconds, e.g.
}

</script>

然后添加另一个按钮：

<a onclick="startReload();">Start it!</a>

Answer 2

setTimeout有一个返回值，可用于停止计时器。 http://www.w3schools.com/jsref/met_win_cleartimeout.asp此页面上甚至还有一个示例，它可以完全满足您的需求。

启动/停止脚本以刷新页面

2 个答案: