0

У меня есть 2 функции, обе запускаются по нажатии на одну кнопку поочерёдно, как я могу запретить выполнять вторую функцию пока не выполнится первая?

Я знаю, что можно добавить одну переменную и переключать её в конце каждой из функции, но хотелось бы узнать можно ли как-нибудь по-другому это реализовать.

4
  • При этом у меня это не кнопка, а блок, то есть способ с disabled на кнопку, пока выполняется функция не подходит
    – Qizin
    10 мая 2021 в 5:22
  • 1
    Поскольку в js функции в принципе не могут выполняться одновременно, нужно больше подробностей. Непонятно что именно у вас выполняется. Но вообще переменная-флаг вполне стандартный способ
    – Alexey Ten
    10 мая 2021 в 5:41
  • Вот ссылка q1zin.ru/globalus сделайте ширину мобилы, появился бургер меню, если нажимать на неё спокойной, то всё ок, а если много раз нажимать она начинает ехать
    – Qizin
    10 мая 2021 в 5:49
  • Поставьте в начале функций openmenu() и closemenu() проверку на значение btnMenu и если оно не такое, как нужно, делайте return.
    – fixer
    10 мая 2021 в 10:03

1 ответ 1

1

Можно на время выполнения анимации делать ссылку некликабельной через setTimeout:

let link = document.querySelector('a')
link.addEventListener('click',function(){
  this.style.pointerEvents = 'none'
  setTimeout(()=>{this.style.pointerEvents = 'auto'},1000) 
  document.querySelector('.content').classList.toggle('active')
})
.content {
  overflow: hidden;
  transition: 1s;
  height: 0;
  background: #ddd;
}

.content.active {
  height: 30px;  
}
<a href="#">Click</a>
<div class="content">Контент</div>

Возможен еще вариант через событие transitionend. Конкретно в вашем случае это событие надо добавить на элементы с классом 'header__menu--strech'. Насколько я понял проблема возникала именно с ними.

let link = document.querySelector('a')
let content = document.querySelector('.content')

content.addEventListener('transitionend',function(){
  link.style.pointerEvents = 'auto'
})

link.addEventListener('click',function(){
  this.style.pointerEvents = 'none'  
  content.classList.toggle('active')
})
.content {
  overflow: hidden;
  transition: 1s;
  height: 0;
  background: #ddd;
}

.content.active {
  height: 30px;  
}
<a href="#">Click</a>
<div class="content">Контент</div>

3
  • Думаю, что в данном случае, лучше делать не через таймер, а через событие transitionend.
    – UModeL
    10 мая 2021 в 8:31
  • 1
    @UModeL спасибо, не знал о таком событии. Обновил ответ, если я правильно понял его применение. 10 мая 2021 в 9:55
  • 1
    да, всё верно. Теперь не нужно вручную указывать задержку в таймере. А всё знать невозможно - я сам иногда подскакиваю на стуле, когда вижу какую-нибудь полезнейшую фичу доступную ещё с первых версий браузеров, а я о ней и знать не знал :)
    – UModeL
    10 мая 2021 в 14:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.