Как приостановить и возобновить интервал

Я делаю браузерную игру, в которой вы плаваете на кораблях.

Вы смотрите сверху, как в GTA 1 и 2. Поэтому, когда вы двигаетесь в определенном направлении, появляется анимация, которая перемещает корабль примерно на 50 пикселей в его направлении.

Эта анимация длится 5 секунд.

Чтобы загрузить данные сетки, у меня есть таймер, который обновляет данные каждую секунду, но именно здесь эти два конфликтуют.

Через секунду анимация прерывается таймером, загружающим данные сетки. Я пробовал это, но это не останавливает таймер:

 


<script>


function myMoveUp() {


var elem = document.getElementById("myAnimationUp");


var pos = 0;


var id = setInterval(frame, 50);


Clock.pause();


function frame() {


if (pos == 105) {


clearInterval(id);


Clock.resume();


} else {


pos++;


elem.style.bottom = pos + 'px';


}


}


MoveShip();


}


</script>


<script>


// the timer we want to stop for a few seconds


var Clock = {


totalSeconds: 0,


start: function () {


var self = this;


this.interval = setInterval(function () {


self.totalSeconds += 1;


$("#hour").text(Math.floor(self.totalSeconds / 3600));


$("#min").text(Math.floor(self.totalSeconds / 60 % 60));


$("#sec").text(parseInt(self.totalSeconds % 60));


$('#ShowGridData').load('data/griddata.php');


}, 1000);


},


pause: function () {


clearInterval(this.interval);


delete this.interval;


},


resume: function () {


if (!this.interval) this.start();


}


};


Clock.start();


$('#pauseButton').click(function () { Clock.pause(); });


$('#resumeButton').click(function () { Clock.resume(); });


</script>

Код (разметка):

Спасибо за ваш ответ. Мне нравится идея спрятать кнопку, чтобы ее нельзя было нажать. Теперь у меня есть этот код, но он не работает? Он скрывает кнопку всего на долю секунды.

 


<script>


pause: function () {


clearInterval(this.interval);


delete this.interval;


$("#sail_btn").click(function(){


$("#sail_button").hide();


});


},


resume: function () {


if (!this.interval) this.start();


$("#sail_btn").click(function(){


$("#sail_button").show();


});


}


</script>


// 1 of 4 buttons, they are all the same except the function it calls will be different.


<div id="sail_btn"><button type="submit" class="lst" id="sail_button" name="login_user" href="javascript:void(0)" onclick="myMoveUp()">Sail</button></div>

Код (разметка):

У меня это работает.

Это была грамматическая ошибка.

Теперь мне интересно.

У меня есть кнопка, которая вызывает myMoveUp(). Как мне сделать так, чтобы после нажатия кнопки я больше не мог нажимать ее, пока анимация не завершится? Если вы спамите, нажмите кнопку, теперь она выглядит глючной.

Могу ли я избежать вызова сценария, если он уже был вызван?

Он должен быть частью if !this.interval, вот так

 
resume: function () {
if (!this.interval){

this.start();
$("#sail_button").show();
}

$("#sail_btn").click(function(){

$("#sail_button").show();
});
}

Код (разметка):