Как запретить выполнять функцию, пока не выполнится предыдущая?

Question

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

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

Answer 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>

БЛОГ НА HUSL

Как запретить выполнять функцию, пока не выполнится предыдущая?

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