clearInterval (intervalId) просто останавливает интервал, он на самом деле не очищает его - PullRequest
Новая
       8

clearInterval (intervalId) просто останавливает интервал, он на самом деле не очищает его

0 голосов
/ 10 января 2019

Я не совсем уверен, как справиться с этим, поскольку я не понимаю, что я делаю неправильно, поэтому каждый раз, когда я нажимаю на созданную кнопку «Пуск», запускается setInterval: 

$("#questBox").on("click", "#startQuestButton", function(){
    document.getElementById("startQuestButton").classList.add("hidden");
    var requiredTime = 10000;
    var timer = 0;

    var interval = setInterval(function(){
        if(timer>requiredTime){
            clearInterval(interval)
            document.getElementById("startQuestButton").classList.remove("hidden");
        }
        timer+=1000; 
    }, 1000);
}

И startQuestButton - это div, присутствующий в моем html-файле: 

<div id="startQuestButton"></div>

Теперь, когда я нажимаю кнопку пуска во второй раз, запускаются 2 идентичных setIntervals, 3 - в третий раз и так далее. Я даже пытался установить интервал в ноль до и после того, как я нажимаю на кнопку запуска. Кроме того, кнопка запуска скрыта до тех пор, пока идет интервал. Я хочу полностью уничтожить предыдущий интервал, чтобы при нажатии кнопки «Пуск» срабатывал только один. Мне нужно setInterval для отображения индикатора выполнения, который имитирует полосу загрузки (поэтому каждую секунду ширина цветного элемента увеличивается на несколько пикселей).

1 Ответ

0 голосов
/ 10 января 2019

Это потому, что setInteval() не возвращает интервальный объект (на самом деле такого не существует), но его идентификатор поэтому, когда вы очищаете, вы очищаете только последний созданный, потому что это идентификатор, сохраненный в interval

var requiredTime = 2000;
var timer = 0;

var interval

function createInterval() {
  interval = setInterval(function(){
      if(timer>requiredTime){
          console.log(`cleared interval : ${interval}`)
          clearInterval(interval)
      }
      timer+=500; 
  }, 500);
  console.log(`created interval : ${interval}`)
}

document.getElementById("b").onclick = createInterval
<button id="b">clickMe</button>

чтобы иметь только один за раз, идея состоит в том, чтобы очистить перед воссозданием 

var requiredTime = 2000;
var timer = 0;

var interval

function createInterval() {
  // as pointed by Barmar the if here is not useful in production since clearInterval with a parameter that is not an interval id do nothing silently
  // I only keep it to prevent this snippets to log "cleared interval : undefined"
  if(interval) {
    clearInterval(interval)
    console.log(`cleared interval : ${interval}`)
  }
  
  interval = setInterval(function(){
      if(timer>requiredTime){
          clearInterval(interval)
          console.log(`cleared interval : ${interval}`)
      }
      timer+=500; 
  }, 500);
  console.log(`created interval : ${interval}`)
}

document.getElementById("b").onclick = createInterval
<button id="b">clickMe</button>
...