JavaScript：使用开关按钮重复自动刷新网页

Question

我想使用Javascript实现网页自动刷新，同时用户可以选择打开/关闭自动刷新功能，使用两个不同的按钮（请注意，这些按钮使用<label>和<input>标签）。我已经尽力编写了代码，但我仍然不知道如何将这两个代码链接起来，以便它可以正确地运行。

此外，如果用户选择开启自动刷新按钮，我希望它在第一次加载后保持自动刷新，而不是仅自动刷新一次。

请您帮我修正我的代码，谢谢。

ON和OFF按钮的代码（两个单独的按钮）：

<div class="page-header-actions" data-toggle="buttons" role="group">
  <label class="btn btn-outline btn-primary active">
    <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked />
    <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF
  </label>
  <label onClick="startrefreshon" class="btn btn-outline btn-primary">
    <input type="radio" autocomplete="off" value="autorefreshon" />
    <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON
  </label>
</div>

自动刷新功能的代码：

<script type='text/javascript'>
setTimeout(function(){
   window.location.reload(1);
}, 5000);
</script>

- Dennis

---

很遗憾，我认为你无法做到这一点。你可能能够停止刷新，但是你将无法再次开启它，除非重新刷新页面。 - Frederick M. Rogers

@FrederickM.Rogers 噢，如果我想在默认情况下启用自动刷新，加载页面后它可以通过单击自动刷新关闭按钮来关闭刷新功能呢？这可能吗？ - Dennis

@FrederickM.Rogers 让我解释得更详细些。我想默认启用自动刷新功能，即一旦加载页面，它将每隔1分钟重复自动刷新页面，用户可以通过点击“关闭”按钮选择关闭自动刷新功能（即页面将不再自动刷新）。这种实现方式可行吗？应该如何编写代码？ - Dennis

似乎@vsr已经解决了问题。祝你的项目好运！ - Frederick M. Rogers

Answer 1

以下是您需要做的几件事情：

1. 两个应该有相同的name属性。
2. 给“自动刷新”按钮一个ID，以便在JavaScript代码中轻松引用它（比如说auto-refresh-checkbox）。
3. 编写一个重新加载函数，检查复选框是否被选中。

代码：

function reloadPage(){
  var refreshEnabled = document.getElementById('auto-refresh-checkbox');
  if(refreshEnabled.checked) {
    window.location.reload(1);
  }
}

4. 然后通过setInterval调用此函数

setInterval(reloadPage, 5000);

---

PS：在页面重新加载时，选中的“自动刷新”单选按钮将失去其值，因此您可能需要使用localStorage或其他方法保存该值。

- vsr

---

太好了！你的代码运行良好。如果我想在默认情况下启用自动刷新功能（即每1分钟重复自动刷新页面），用户可以通过单击“关闭”按钮来选择关闭自动刷新功能（即页面将不再自动刷新），该怎么办？这是否可能，应该如何编写代码？ - Dennis

要将其默认设置为ON，请将HTML中的checked属性从OFF单选按钮移动到ON单选按钮。 - vsr

是的，它可以工作了！ :) 现在它可以在加载后保持刷新。那么，我如何通过点击“关闭”按钮停止自动刷新页面呢？ - Dennis

如果您按照答案中的第一点操作，OFF按钮应该可以正常工作。 - vsr

@Dennis，如果这个解决方案有效，你应该将其标记为“答案”。 - Frederick M. Rogers