Как правильно объединить две js функции в одну?

Question

[ololodff]

var sec = $('.rocket');
		var secVal = 5;
		function timer(){
			var timer = setTimeout(function tick() {
				if (secVal > 0) {
				    sec.text(--secVal);
				    timer = setTimeout(tick, 1000);
				} else {
				   	sec.text('text');
				}
			}, 1000);
		}
	    fancybox.on("done", (fancybox, slide) => {
	    	timer();
	   })

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

Answer 1

[Rsa97]

Перед запуском таймера проверять его состояние. Если таймер уже запущен и ещё не завершился, то либо завершать предыдущий и инициализировать новый, либо пропускать инициализацию.

let timer = null;
...
if (timer !== null) {
  timer = setTimeout(
    () => {
      timer = null;
      ...
    },
    1000
  );
}

Comments

[ololodff]

Не понял, как это применить?

[Rsa97]

ololodff, Прочитать, понять, что делается в коде, применить к своему коду.

[ololodff]

Rsa97, Мои понимания кода заканчиваются на символах () =>
Непонимаю для чего и как они работают

[Rsa97]

ololodff, Тогда вам лучше начать с изучения основ JavaScript.
https://developer.mozilla.org/en-US/docs/Web/JavaS...

[ololodff]

Rsa97, Ну подскажите на примере моего кода пожалуйста, я не могу понять что я делаю не так. У меня не работает. Так же проще будет понять

[ololodff]

Rsa97, Ну или хотябы по человечески код дайте, без стрелочных выражений

[ololodff]

function timer{id}(){
			var timer = null;
			if (timer !== null){
				timer = setTimeout(function tick() {
					timer = null;
					if (secVal > 0) {
					    sec.text(--secVal);
					    timer = setTimeout(tick, 1000);
					} else {
					   	sec.text('text{id}');
					}
				}, 1000);
			}
		}

Сделал так, не хочет работать

[Rsa97]

ololodff,

const sec = $('.rocket');
const secVal = 5;
let timer = null;
function setTimer() {
  if (timer == null)
    timer = setTimeout(
      () => {
        timer = null;
        sec.text('text');
      },
      secVal * 1000
    );
  }
}
fancybox.on('done', setTimer);

[ololodff]

Rsa97, обратный отсчет теперь не работает, его даже в коде нет, спасибо за стёб и понты, время только зря потратил..

[Rsa97]

ololodff, Сорри, не заметил обратного отсчёта.

const sec = $('.rocket');
let timer = null;
function setTimer() {
  if (timer === null) {
    let secVal = 5;
    timer = setInterval(
      () => {
        sec.text(--secVal);
        if (secVal === 0) {
          clearInterval(timer);
          timer = null;
          sec.text('text');
        }
      },
      1000
    );
  }
}
fancybox.on('done', setTimer);

[ololodff]

Rsa97, Проблема осталась та же :D Каждый раз когда я вызываю окно, таймер от старого окна не исчезает а новый накладывается на него и он по 2 секунды сразу отсчитывает

[ololodff]

Rsa97, Допустим, я открыл окно, и таймер начал работать в нем, отсчитывает 10 секунд, все хорошо..
Но как только я закрываю окно и открываю его сразу, то прежний таймер в этом же окне работает дальше а новый работает параллельно с ним и в этот же блок .rocket выводит отсчет обоих таймеров

[Rsa97]

ololodff, Значит это не весь код.
Если вам надо останавливать таймер при закрытии окна, то это надо делать явно, через clearTimeout/clearInterval.

[ololodff]

Rsa97, это весь код..

Answer 2

[GrayHorse]

Неужели это не лучше?

async function timer() {
  let countdown = 5;
  while (countdown--) {
    console.log(countdown + 1);
    await sleep(1000);
  };
  console.log("done");
}
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

С отменой на повторном вызове:

let execId = 0;
async function timer() {
  let countdown = 5;
  const id = ++execId;
  while (countdown--) {
    if (id !== execId) {
      return;
    }
    console.log(countdown + 1);
    await sleep(1000);
  };
  console.log("done");
}
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

Comments

[ololodff]

не работает

[GrayHorse]

В консоли все прекрасно работает.

Выводится 5, 4, 3, 2, 1, "done".
И если вызвать повторно, не дожидась окончания предыдущего вызова timer, вывод начнется заново, без каши.

[Антон Шаманов]

конечно лучше, но посмотри на плинтус - это его уровень

[ololodff]

GrayHorse, Нет, он накладывается на старый.. проверял

Answer 3

[Антон Шаманов]

clearTimeout()