Question

目前我正在每1分钟构建一个具有自动刷新功能的网页。此外，我的网页还包括一个自动刷新ON和OFF按钮，供用户选择是否打开/关闭自动刷新。默认情况下，网页会在加载后立即自动刷新。

但是，如果用户不想打开该功能，我想让用户关闭自动刷新功能。我试图搜索答案，有些人说它可以使用clearTimeout(timeout)函数。因此，我想知道如何通过点击关闭按钮来停止自动刷新功能？是通过在Javascript中添加clearTimeout(timeout)代码吗？谢谢。

自动刷新功能的代码：

    <body onload="setInterval(reloadPage, 5000);">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    function reloadPage(){
      var refreshEnabled = document.getElementById('auto-refresh-checkbox');
      if(refreshEnabled.checked) {
        window.location.reload(60000);
      }
    }
    </script>

开启/关闭按钮的代码：

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

Answer 1

删除onload并将setinterval放入document ready function

var refreshIntervalId = setInterval(fname, 10000);

/ *稍后点击按钮或* /

clearInterval(refreshIntervalId);

请参阅setInterval()和clearInterval()的文档。

Javascript：按钮停止自动刷新功能

1 个答案: