Использование setInterval и clearInterval для запуска и остановки перезагрузки файла с помощью флажка ввода HTML - PullRequest
Новая
       11

Использование setInterval и clearInterval для запуска и остановки перезагрузки файла с помощью флажка ввода HTML

1 голос
/ 28 сентября 2019

Мне нужна помощь в использовании 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);

1 Ответ

1 голос
/ 28 сентября 2019

Вы можете использовать возвращаемое значение setInterval для управления таймером:

Возвращенное intervalID является числовым ненулевым значением, которое идентифицирует таймерсозданный вызовом setInterval();, это значение может быть передано WindowOrWorkerGlobalScope.clearInterval() для отмены тайм-аута.

Мы также можем использовать прослушиватель изменений jQuery в элементе checkbox для прослушивания переключений.Всякий раз, когда мы слышим об изменении элемента, мы можем включать и выключать интервал в зависимости от его значения (ненулевой идентификатор, если выполняется, или 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>
...