как приостановить addEventListener, пока обрабатывается предыдущее действие?

Question

проблема в том, что если нажимать на кнопку с классом progress-bar многократно, то все ломается. Нужно как-то отключить его, пока addEventListener полностью не выполнилась. При многократном нажатии на кнопку срабатывает одновременно одна и та же функция, после чего происходит непонятные движения кнопки.

document.querySelector('.progress-bar').addEventListener('click', function() 
{   
  element.classList.remove("progress-bar_active")
    console.log(1)
    while(height != 30 || width != 600) {
        if (height != 30) {
            height -= 1;
        }
        if(width != 600) {
            width += 2;
        }
        element.style.width = width + "px";
        element.style.height = height + "px";
    }
    setTimeout(() => {  
        e.setAttribute('id','progress-bar__button'); 
        el.style.visibility =  "visible"
    

}, 1000);
    setTimeout(() => {  
        el.style.visibility =  "hidden"
        e.removeAttribute('id','progress-bar__button'); 
        while(height != 120 || width != 300) {
            if (height != 120) {
                height += 1;
            }
            if(width != 300) {
                width -= 2;
            }
            element.style.width = width + "px";
            element.style.height = height + "px";
            
        }
    }, 6000);

});
}

Answer 1

Можно вполне сделать кнопку не активной на время выполнения функции

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

button.addEventListener('click', function () {
  button.disabled = true;
// ... код ...
  setTimeout(disabled, 2000) // эмуляция работы функции
});

const disabled = () => {
  button.disabled = false;
}

<button>Нажми меня</button>

БЛОГ НА HUSL

как приостановить addEventListener, пока обрабатывается предыдущее действие?

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