@Zukrine

Проблема в setInterval или руках?

Долго бьюсь над одним моментом. Вот код:

function progressBarHealth() {
    let barHealth = document.querySelector('.health');
    let width = 490;
    const buttonHealth = document.querySelector('.to_heal');
    setInterval(progressStatus, 50);
    function progressStatus() {
        width--;
        barHealth.style.width = `${width}px`;
        buttonHealth.addEventListener('click', () => {
            width++;
            if (width > 490) {
                 width = 490;
                 return;
             }
            console.log(width);
            return;
        });
        if (width == 350) {
            changeImgHealth();
        }
    }
}


Нужно, чтобы при нажатии на кнопку добавлялось определенное, но небольшое значение к прогресс бару. Но опытным путем выяснил вот что:
Пока прошла лишь одна итерация setInterval, нажатие по кнопке прибавляет правильное значение, но с изменением количества итераций одно нажатие повторяется столько раз, сколько прошло итераций.
В итоге если уменьшить время setInterval, то у меня в пару секунд единица увеличивается в тысячи раз.
Пробовал отменять с помощью clearInterval, но бар вообще замирает. После пробовал завести его заново с помощью рекурсии, но, ожидаемо, бар скидывался на дефолтные значения после каждого нажатия.

Подскажите, куда двигаться-то? Пока вообще никаких мыслей нет...
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
С каждой итерацией навешиваешь обработчик клика снова и снова. Зачем?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы