javascript - 使用 setInterval 和 clearInterval 通过 HTML 输入复选框启动和停止文件重新加载

Question

我需要有关使用 setInterval 和 clearInterval 通过 HTML 输入复选框启动和停止文件重新加载的帮助。

目前，它每 10 秒重新加载一次文件，这很好。但现在我需要更改它，以便如果我从复选框中删除勾号，它应该停止重新加载并保持原样，直到我再次勾选它，它应该再次开始重新加载。

默认情况下它应该被勾选，所以它只在我需要的时候停止。

HTML代码:

<label>
  <input type="checkbox"  name="refresh" id="refresh"
        checked="checked"/>
  refresh
</label>

Javascript 代码:

function auto_load() {
  $.ajax({
    url: "//www.example.com/test.php?id=123",
    cache: false,
    success: function (data) {
      $(".test").html(data);
    }
  });
}

$(document).ready(function () {
  auto_load();
});

//Refresh auto_load() function after 10000 milliseconds
setInterval(auto_load, 10000);

Answer 1

您可以使用 setInterval 的返回值操纵计时器:

The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to WindowOrWorkerGlobalScope.clearInterval() to cancel the timeout.

我们还可以在复选框元素上使用 jQuery 更改监听器来监听切换。每当我们听到元素发生变化时，我们都可以根据它的值打开和关闭间隔(如果正在运行则为非零 id，否则为 undefined)。

这是一个概念验证。我加快了刷新率并使用了模拟 API 请求。

$(document).ready(function () {
  function autoload() {
    $.ajax({
      url: 'http://www.mocky.io/v2/5d8f70953200005600adec34',
      cache: false,
      dataType: 'jsonp',
      crossDomain: true,
      success: function (data) {
        $(".test").html(data + " " + requestNumber++);
      }
    });
  }

  var refreshRate = 1000;
  var requestNumber = 0;
  var interval = setInterval(autoload, refreshRate);
  
  $('#refresh').change(function () {
    if (interval) {
      interval = clearInterval(interval);      
    }
    else {
      autoload();
      interval = setInterval(autoload, refreshRate);
    }
  });
  
  autoload();
});

<label>
  <input type="checkbox"  
         name="refresh" 
         id="refresh"
         checked="checked" />
  refresh
</label>
<div class="test"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请注意，setInterval 仅保证回调触发前的最小延迟，这对于准确计时而言并不可靠。参见 this answer使用 Date 的例子和 requestAnimationFrame以提高准确性(如果这对该应用很重要)。