Интервал постоянно меняется?

Question

Так что в моем коде, если элемент ничего не делает [playing], тогда я начну его играть. Если он играет, остановите игру. Мне удалось заставить его начать играть, но он никогда не останавливается.

var playing = false; 
var current = 30; 
$('#countDownContainer').click(function() { 
     if (!playing) { 
      playing = false; 
      setInterval(function() { 
       $('#workSpace label').get(0).innerHTML = current; 
       current -= 1; 
      },1000); 
     } else { 
      playing = true; 
     } 
    }); 

В теории, когда пользователь нажимает #countDownContainer, playing будет установлен в ложь и запустить setInterval код, и если он уже играет, playing будет установлена ​​истина, и когда идут через петлю она не будет работать. Но на самом деле он продолжает меняться от 30 до 29 и обратно до 30. И он никогда не останавливается, когда я снова нажимал кнопку. пожалуйста, помогите -Спасибо

Answer 1

var clear= setInterval(function() { 
        $('#workSpace label').get(0).innerHTML = current; 
        current -= 1; 
       },1000); 

    clearinterval(clear);// to stop interval where you want 
    //clearInterval(id_of_setinterval) 

ссылка clearInterval

Answer 2

Прежде всего, я думаю, что вы перепутали свой вар playing заданий. Вы также должны назначить идентификатор вернулся из setInterval, так что вы можете позже прервать эту intervalled цикл с clearInterval:

//initialize var at the start of the script 
var intervalID; 

// in the onclick event 
if (!playing) { 
    playing = true; // should be true here 
    intervalID = setInterval(function() { 
     $('#workSpace label').get(0).innerHTML = current; 
     current -= 1; 
    },1000); 
} else { 
    playing = false; // should be false here 
    clearInterval(intervalID); 
} 

См documentation on clearInterval

Answer 3

Это называется logic error.

Поскольку обратите внимание на следующее:

var playing = false;   // playing is initialised to false 

if (!playing) {    // if not playing 
     playing = false;  // set playing to false 

Поэтому playing никогда не может стать true.

Вы можете решить, выполнив следующие действия:

var playing = false; 
var current = 30; 
$('#countDownContainer').click(function() { 
    if (playing) { 
     playing = false; 
    } else { 
     playing = true; 
     setInterval(function() { 
      $('#workSpace label').get(0).innerHTML = current; 
      current -= 1; 
     },1000); 
    } 
}); 

Или в словах:

Если не playing, мы делаем это, играя таким образом: playing = true;

Если playing, мы делаем это не играет следовательно: playing = false

Добавление

Для проблемы с остановкой, пожалуйста, обратитесь к @Riturajratan.