Функция не вызывается несколько раз, почему?

Question

[outplayedrq]

Добрый день, сделал такой таймер, но получается его запустить всего один раз. Пробовал вызывать через всё, что угодно. Как я понял, не обнуляется значение count, progressBar

var duration = 100;
var time = 10

var progressBar = time * 1000;
var count = duration * time;
var counter = setInterval(timer, 10);

function timer() {
    if (count <= 0) {
        clearInterval(counter);
        return count
    }

    count = count - 1;
    var countdown = (count / duration);

    document.getElementById('countdown').innerHTML = countdown;
    const progressElement = document.getElementById('progress-countdown')

    progressBar = progressBar - 10;
    const currentProgressBarValue = progressBar / 1000;
    progressElement.value = currentProgressBarValue
}

При первом запуске всё отлично отрабатывает



По окончанию цикла, выдаёт просто ноль и ждёт следующего запуска, но при попытке запустить ещё раз, он видимо, запускается, но так как значение равно 0, он сразу же уходит в if. Как можно обнулить переменную до начального значения или что-то подобное.

Comments

[t800zippygod]

А как вы вызываете функцию еще раз? Вообще, логику точно надо декомпозировать, то есть все что вы написали я бы вынес в функцию. И эту функцию вызывал бы, когда надо включить таймер. Тогда у вас и переменные заново установятся.

Кроме того, замените объявление переменных через var на let(для и изменяемых) и const(для неизменяемых). var давно устарел и может приводить к неправильному поведению

[outplayedrq]

t800zippygod, Через другую функцию, я пробовал вносить переменные в функцию, от переменные отнимается один раз единица и функция останавливается.

Answer 1

[outplayedrq]

LJ322 Спасибо, Вы натолкнули меня на мысль сделать функцию в функции. Вот что получилось

let duration = 100;
let time = 10

function timer() {

    let progressBar = time * 1000;
    let count = duration * time;
    let counter = setInterval(timerInner, 10);

    function timerInner() {
        console.log(progressBar)
        console.log(count)

        if (count <= 0) {
            clearInterval(counter);
            SpinRoulette()
            return count
        }

        count = count - 1;
        let countdown = (count / duration);

        document.getElementById('countdown').innerHTML = countdown;
        let progressElement = document.getElementById('progress-countdown')

        progressBar = progressBar - 10;
        let currentProgressBarValue = progressBar / 1000;
        progressElement.value = currentProgressBarValue
    }
}

timer()

И вызывая её после отработки другой функции всё отлично отрабатывает

Answer 2

[LJ322]

У вас таймер запускается с кнопки? Попробуйте обернуть эти два действия в функцию:

const counter = () => {
    count = duration * time;
    setInterval(timer, 10);
}

И повесьте эту функцию на кнопку

Comments

[outplayedrq]

Нет, у меня таймер запускается после отработки другой функции