Долго бьюсь над одним моментом. Вот код:
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, но бар вообще замирает. После пробовал завести его заново с помощью рекурсии, но, ожидаемо, бар скидывался на дефолтные значения после каждого нажатия.
Подскажите, куда двигаться-то? Пока вообще никаких мыслей нет...
