Запуск таймера много раз (исправление)

Question

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

let timer = document.querySelector(".timer")
let button = document.querySelector(".button")
let click = document.querySelector(".clicks")

button.addEventListener('click', listener)
button.addEventListener('click', listenerSecond)
function listener(){
    click.innerHTML = Number(click.innerHTML)+1
}
function listenerSecond(){
    let x = setInterval(()=>{
        timer.innerHTML = Number(timer.innerHTML)-1
        if(timer.innerHTML == 0){
            clearInterval(x)
            button.removeEventListener('click', listener);
        }
    },1000)
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}
.button{
    width: 200px;
    height: 50px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
}
.button:hover{
    cursor: pointer;
}
.clicks{
    font-size: 30px;
    font-family: arial;
    margin-top: 25px;
}
.timer{
    font-size: 30px;
    font-family: arial;
    margin-bottom:25px;
}

<div class="container">
        <div class = "timer">5</div>
        <div class = "button">Click!</div>
        <div class = "clicks">0</div>
    </div>

Answer 1

button.addEventListener('click', listenerSecond)
↓ Добавить:
button.addEventListener('click', listenerSecond, { once: true })

Опция { once: true } автоматически удалит обработчик после первого срабатывания.

let timer = document.querySelector(".timer")
let button = document.querySelector(".button")
let click = document.querySelector(".clicks")

button.addEventListener('click', listener)
button.addEventListener('click', listenerSecond, { once: true });

function listener() {
  click.textContent = Number(click.textContent) + 1
}

function listenerSecond() {
  let x = setInterval(() => {
    timer.textContent = Number(timer.textContent) - 1
    if (timer.textContent == 0) {
      clearInterval(x)
      button.removeEventListener('click', listener);
    }
  }, 1000)
}

.container { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh } .button { width: 200px; height: 50px; background-color: red; display: flex; justify-content: center; align-items: center; font-size: 30px; color: white } .button:hover { cursor: pointer } .clicks { font-size: 30px; font-family: arial; margin-top: 25px } .timer { font-size: 30px; font-family: arial; margin-bottom: 25px }

<div class="container">
  <div class="timer">5</div>
  <div class="button">Click!</div>
  <div class="clicks">0</div>
</div>

* Также заменил innerHTML на textContent: Т.к. вставляются обычные строки, а не разметка.

Без once, можно было прямо внутри функции listenerSecond добавить

this.removeEventListener("click", listenerSecond);

Чтобы удаляла сама себя.

Answer 2

Предлагаю добавить "флаг", который обозначает, что таймер уже был запущен.

let timer = document.querySelector(".timer")
let button = document.querySelector(".button")
let click = document.querySelector(".clicks")

button.addEventListener('click', listener)
button.addEventListener('click', listenerSecond)

function listener() {
  click.innerHTML = Number(click.innerHTML) + 1
}

let timerHasBeenStarted = false;

function listenerSecond() {
  if (timerHasBeenStarted) {
    return;
  }
  timerHasBeenStarted = true;

  let x = setInterval(() => {
    timer.innerHTML = Number(timer.innerHTML) - 1
    if (timer.innerHTML == 0) {
      clearInterval(x)
      button.removeEventListener('click', listener);
    }
  }, 1000)
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.button {
  width: 200px;
  height: 50px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

.button:hover {
  cursor: pointer;
}

.clicks {
  font-size: 30px;
  font-family: arial;
  margin-top: 25px;
}

.timer {
  font-size: 30px;
  font-family: arial;
  margin-bottom: 25px;
}

<div class="container">
  <div class="timer">5</div>
  <div class="button">Click!</div>
  <div class="clicks">0</div>
</div>

БЛОГ НА HUSL

Запуск таймера много раз (исправление)

Ответы (2 шт):