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

  • Автор темы Smeyan
  • 35
  • Обновлено
  • 16, May 2024
  • #1
Я делаю браузерную игру, в которой вы плаваете на кораблях.

Вы смотрите сверху, как в 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>

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

Smeyan


Рег
26 Mar, 2014

Тем
1

Постов
3

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

<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>

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

elonleads


Рег
04 Dec, 2014

Тем
1

Постов
2

Баллов
12
  • 07, Jun 2024
  • #3
У меня это работает.

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

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

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

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

fanatos1


Рег
31 Jan, 2016

Тем
1

Постов
2

Баллов
12
  • 14, Jun 2024
  • #4
Он должен быть частью if !this.interval, вот так
 
resume: function () {
if (!this.interval){

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

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

$("#sail_button").show();
});
}
Код (разметка):
 

Нионова Нионка


Рег
12 Feb, 2013

Тем
3

Постов
8

Баллов
38
Тем
49554
Комментарии
57426
Опыт
552966

Интересно