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

  • Автор темы Smeyan
  • Обновлено
  • 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

Тем
79

Постов
184

Баллов
589
  • 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

Тем
78

Постов
195

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

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

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

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

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

Fanatos1


Рег
31 Jan, 2016

Тем
72

Постов
208

Баллов
618
  • 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

Тем
56

Постов
180

Баллов
510
Тем
403,760
Комментарии
400,028
Опыт
2,418,908