Почему при повторном клике setTimeout начинает работать быстрее?

Question

при многочисленных кликах setTimeout ускоряется как это исправить?

const btn = document.querySelector('.button');
const success = document.querySelector('.success');

btn.onclick = () => {
  success.classList.add('success_active');
  
  setTimeout(() => {
    success.classList.remove('success_active');
  }, 1000)
}

.success {
  width: 200px;
  padding: 25px;
  background-color: #CEDDEC;
  text-align: center;
  opacity: 0;
  visibilyti: hidden;
  transition: 0.5s;
}

.success_active {
  opacity: 1;
  visibilyti: visible;
}

<div class="success"> Алерт </div>
<button class="button">Вызвать</button>

Answer 1

const btn = document.querySelector('.button');
const success = document.querySelector('.success');

btn.onclick = () => {
  if (btn.timeoutHandle) {
    clearTimeout(btn.timeoutHandle);
  }
  success.classList.add('success_active');
  
  btn.timeoutHandle = setTimeout(() => {
    btn.timeoutHandle = null;
    success.classList.remove('success_active');
  }, 1000)
}

.success {
  width: 200px;
  padding: 25px;
  background-color: #CEDDEC;
  text-align: center;
  opacity: 0;
  visibilyti: hidden;
  transition: 0.5s;
}

.success_active {
  opacity: 1;
  visibilyti: visible;
}

<div class="success"> Алерт </div>
<button class="button">Вызвать</button>

БЛОГ НА HUSL

Почему при повторном клике setTimeout начинает работать быстрее?

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