Как остановить таймер в данном случае?

Question

[Troodi Larson]

Добрый день. Имеется написанный мною код:

var counter = 1;
var timerId;

function generate() {
    if (counter < 7) { // Повторить 7 раз
        timerId = setTimeout(generate, counter * 100 * 3); // Ожидаем выполнения кода с анимацией
        $({
            animatedVal: 0
        }).animate({
            animatedVal: 100
        }, { // Запускаем анимацию со значения 0 до 100
            duration: counter * 300, // Чем больше кругов сделано, тем медленнее вращается элемент
            easing: "swing", // Тип анимации
            step: function() {
                $(".cursor-mode").val(Math.ceil(this.animatedVal)).trigger("change"); // Изменение значение, и установления триггера, чтобы knob.js это увидел
            }
        });
        $(".cursor-mode").val(0).trigger("change"); // После окончания ставим значение 0
        counter++; // Инкрементим круг
    } else { // Если мы на последнем кругу
        $({
            animatedVal: 0
        }).animate({
            animatedVal: 78
        }, { // Показываем сгенерированное число
            duration: 2100, // 7 * 300
            easing: "swing",
            step: function() {
                $(".cursor-mode").val(Math.ceil(this.animatedVal)).trigger("change");
            }
        });
        setTimeout(function() {
            $('#win_alert').show(); // Оповещаем, что число сгенерировано
        }, 2100);
        counter = 1;
    }
}

На скриншоте показано что это из себя представляет. По сути анимировал генерацию числа. Сначала круг вращается быстро а потом замедляется и останавливается на определенном значении.
Заранее прошу простить за чистоту кода, с JS я на "Вы".
Проблема: Когда я закрываю модальное окно, и открываю дальше то начинает работать уже 2 таймера. А останавливать таймер при закрытии модального окна не получается, и таймеры отрабатывают всегда до конца 7 кругов в моем случае:

$("#modal").on("hidden.bs.modal", function () {
      clearTimeout(timerId);
      timerId = 0;
    });

Как сделать это максимально правильно? Чтобы при закрытии весь процесс анимации останавливался.
Заранее благодарю за советы!

Comments

[h88p]

Вы хотите при нажатии на кнопку 'Закрыть окно' останавливались все таймеры?
Попробуйте следующее решение:

let id = window.setTimeout(() => {}, 0);
while (id--) {window.clearTimeout(id);}

[dollar]

За чистоту кода прощаю, а за отступы в коде - нет. Это же как читать его? Добавил правку вопроса.

[Troodi Larson]

dollar, Когда скопировал побилось, сейчас поправлю.

[Troodi Larson]

h88p, Да, верно.

Answer 1

[dollar]

То, что вы хотите, написано очень смутно, сложным языком. Я не разобрался.
Но вот вам простой грубый костыль, который приходит в голову:

function stopAllTimers() { //Остановить все таймеры
	let id = setTimeout('1',0);
	for(let i=id;i>=0;i--) clearTimeout(i);
}

Проверка на вшивость:

setTimeout('console.log(123)',0); stopAllTimers(); //Всё ок

Comments

[Troodi Larson]

Меня Ваш совет навёл ещё на мысль. Чтобы завершить все таймауты, можно писать их в массив, а потом в цикле чистить их. Просто let в данном случае не получится использовать.

[dollar]

Да, можно глобальный массив сделать, в начале скрипта.