Как сделать задержку при нажатии на кнопку?

Question

Нажимаю на кнопку и выдвигается другой блок. Проблема в том, что на кнопку можно много раз тыкать и блок будет появляться и исчезать. Как поставить задержку после нажатия на кнопку? К примеру, нажал на кнопку и повторное нажатие на неё не будет считаться, пока не пройдёт секунда, которой хватит на выезд блока, точно так же в обратную сторону. Нужен будет код - пишите, добавлю Можно через javascript сделать?

function click1() {
  //document.querySelector(".townhall0").setAttribute("checked", "checked");
  //setTimeout(() => {
  //document.querySelector(".townhall0").setAttribute("checked", "");
  //document.querySelector(".townhall0").removeAttribute("checked");
  //document.querySelector(".townhall0").checked = false;
  document.querySelector(".townhall1").classList.toggle('active1');
  document.querySelector(".townhall2").classList.toggle('active2');
  document.querySelector(".townhall3").classList.toggle('active3');
  document.querySelector(".townhall4").classList.toggle('active4');
  document.querySelector(".townhall5").classList.toggle('active5');
  document.querySelector(".townhall6").classList.toggle('active6');
  document.querySelector(".townhall7").classList.toggle('active7');
  document.querySelector(".more").classList.toggle('activeMore');
  document.querySelector(".townhall8").classList.toggle('active8');
  if (document.querySelector(".townhall1").classList.contains("active1")) {
} else {
  setTimeout(timer1, 50);
  setTimeout(timer2, 500);
  function timer1() {
    document.querySelector(".townhall8").classList.remove('actives8');
    document.querySelector(".townhall8").classList.add('active8');
  }
  function timer2() {
    document.querySelector(".townhall8").classList.remove('active8');
  }
}
  //}, 1000)
}

function click2() {
  document.querySelector(".townhall8").classList.toggle('actives8');
  document.querySelector(".townhall9").classList.toggle('active9');
  document.querySelector(".townhall10").classList.toggle('active10');
  document.querySelector(".townhall11").classList.toggle('active11');
  document.querySelector(".townhall12").classList.toggle('active12');
  document.querySelector(".townhall13").classList.toggle('active13');
  document.querySelector(".townhall14").classList.toggle('active14');
}

.townhall0 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-left: 5px;
  margin-top: 0.3%;
  z-index: 15;
  background-color: rgb(65, 105, 225);
  border: none;
  border-radius: 10px;
  background-image: url("img/builderhall1.png");
  background-size: 80px;
  background-repeat: no-repeat;
  border: 2px solid white;
  outline: 2px solid black;
}
.townhall1 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 14;
}

.townhall1.active1 {
  transform: translateY(102%);
}

.townhall2 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 13;
}


.townhall2.active2 {
  transform: translateY(204%);
}

.townhall3 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 12;
}


.townhall3.active3 {
  transform: translateY(306%);
}

.townhall4 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 11;
}


.townhall4.active4 {
  transform: translateY(408%);
}

.townhall5 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 10;
}


.townhall5.active5 {
  transform: translateY(510%);
}

.townhall6 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 9;
}


.townhall6.active6 {
  transform: translateY(612%);
}

.townhall7 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: grey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 8;
}


.townhall7.active7 {
  transform: translateY(714%);
}

.more {
  position: absolute;
  width: 80px;
  height: 40px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translateY(0%);
  transition: transform 1s ease;
  background-color: blue;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 7;
}


.more.activeMore {
  transform: translateY(1558%);
}

.townhall8 {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  margin-left: 5px;
  transform: translate(0%);
  transition: transform 0.5s ease;
  background-color: lightgrey;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 2px solid white;
  outline: 2px solid black;
  z-index: 6;
}

.townhall8.active8 {
  transform: translatey(104%);
}

.townhall8.actives8 {
    transform: translate(104%, 104%);
}

<div type="button" class="townhall0" onclick="click1()">
            </div>
                <div type="button" class="townhall1">
            </div>
                <div type="button" class="townhall2">
            </div>
                <div type="button" class="townhall3">
            </div>
                <div type="button" class="townhall4">
            </div>
                <div type="button" class="townhall5">
            </div>
                <div type="button" class="townhall6">
            </div>
                <div type="button" class="townhall7">
            </div>
                <div type="button" class="more" onclick="click2()">
            </div>
                <div type="button" class="townhall8">
            </div>
                <div type="button" class="townhall9">
            </div>
                <div type="button" class="townhall10">
            </div>
                <div type="button" class="townhall11">
            </div>
                <div type="button" class="townhall12">
            </div>
                <div type="button" class="townhall13">
            </div>
                <div type="button" class="townhall14">
            </div>

Answer 1

При клике на кнопку делаем её недоступной для клика, например ставим атрибут disabled=disabled
Ниже кода с установкой недоступности пишем
```
 setTimeout(() => {
     // тут ставим кнопке доступность обратно, 
     // т.е. убираем disabled
 }, 1000) // 1000 - это миллисекунды, то есть 1сек.
```
таймаут - метод, который принимает в себя функцию, которая должна выполниться и количество миллисекунд, через которые эта самая внутренняя функция должна выполниться. В итоге через 1сек выполнится код, который уберёт disabled

Ссылка на доки: https://developer.mozilla.org/ru/docs/Web/API/setTimeout

БЛОГ НА HUSL

Как сделать задержку при нажатии на кнопку?

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