Как отключить setInterval, если он помещён в функцию?

Question

[SherbakovFirst]

У меня такая ситуация. Это что то типо опросника
При нажатии на кнопку, у меня вызывается функция questionGeneration(), в которой есть функция timer(), которая запускает setInterval, которая уменьшает innerHTML на 1, каждую секунду
Когда innerHTML станет 0, то вызывается функция resultFalse(), но функция resultFalse() может быть вызвана пользователем заранее, если он даст не верный ответ

Разумеется я не могу поставить завершение таймера просто так, ведь он находится в функции. Как мне сделать завершение setInterval, при вызове функции resultFalse(), ведь имя setInterval находится в функции timer()

Приклеплю код, хотя наверное он мало что даст

function timer() {
    const checkTimer = document.querySelector("#checkTimer");
    function restOfTime() {
        if (Number(checkTimer.innerHTML == 0)) {
            checkTimer.parentElement.innerHTML = `<span style="color: #a8323e">Время закончилось</span>`
            clearTimeout(timeForQuestion)
            resultFalse(state);
        } else {
            checkTimer.innerHTML = checkTimer.innerHTML - 1;
        }
    }
    
    let timeForQuestion = setInterval(restOfTime, 1000)
}

function questionGeneration(elem) {
    fullEnable(document.querySelector(".timer__window"))
    document.querySelector(".timer__window").innerHTML = `<h1>Оставшееся время 0:<span id="checkTimer">45</span></h1>`
    let objectQuestion =
        elem.questions[Math.floor(Math.random() * elem.questions.length)];
    if (questionArray.indexOf(objectQuestion.id) < 0) {
        questionArray.push(objectQuestion.id);
        questionWindow.innerHTML = objectQuestion.question;
        elem.currentAnswer = objectQuestion;
        conditionAnswer();
        timer()
        return;
    } else {
        checkPossibleQuestions(elem);
        return;
    }
}

function resultFalse(elem) {
    const falseAnswerCount = document.querySelector("#falseAnswerCount");
    falseAnswerCount.innerHTML = Number(falseAnswerCount.innerHTML) + 1;
    questionWindow.innerHTML = `<span style="color: #C30052">Ты совершил ошибку</span> <br> ${elem.currentAnswer.currentAnswerQuestion}`;
    createQuestionBtn.innerHTML = "Учту. Создать новый вопрос";
    fullDisableElem(answerButton);
    fullEnable(createQuestionBtn);
    changeInput("false");
}

Answer 1

[Алексей Ярков]

// Выносим за пределы функции, чтобы иметь доступ из любой функции
let timeForQuestion;

function timer() {
    const checkTimer = document.querySelector("#checkTimer");
    function restOfTime() {
        if (Number(checkTimer.innerHTML == 0)) {
            checkTimer.parentElement.innerHTML = `<span style="color: #a8323e">Время закончилось</span>`
            clearTimeout(timeForQuestion)
            resultFalse(state);
        } else {
            checkTimer.innerHTML = checkTimer.innerHTML - 1;
        }
    }
    
    timeForQuestion = setInterval(restOfTime, 1000)
}

function resultFalse(elem) {
    clearInterval(timeForQuestion); // останавливаем интервал
    const falseAnswerCount = document.querySelector("#falseAnswerCount");
    falseAnswerCount.innerHTML = Number(falseAnswerCount.innerHTML) + 1;
    questionWindow.innerHTML = `<span style="color: #C30052">Ты совершил ошибку</span> <br> ${elem.currentAnswer.currentAnswerQuestion}`;
    createQuestionBtn.innerHTML = "Учту. Создать новый вопрос";
    fullDisableElem(answerButton);
    fullEnable(createQuestionBtn);
    changeInput("false");
}

Comments

[SherbakovFirst]

Спасибо. Я знаю что так будет работать, но это не является ли "грязным кодом"? Я просто ещё новичок и для меня если что то не в функции, которая только возвращает, то это грязный код

[Алексей Ярков]

SherbakovFirst,

для меня если что то не в функции, которая только возвращает, то это грязный код

Сколько же вам предстоит узнать плохого на первой работе... )))
Всё нормально. В вашем случае это приемлемо ))

Answer 2

[Александр Талалаев]

Функции у вас перегруженны конечно. но вернёмся к интервалам.
В вашей функции timer() вы можете написать в конце:

function timer(delay = 1000) {
    //---    
    return setInterval(restOfTime, delay)
}

Далее, тогда при вызове timer() вы получаете идентификатор по которому таймер можно остановить в любой момент.

const questTimer = timer();
// ----
clearInterval(questTimer);

Функция resultFalse тоже так себе (в timer тоже нужно вынести лишнее), но там мы видим штуку changeInput, а значит можно повесить слушалку событий addEventListener на что-то что меняется и слушать в основной потоке/функции гдле вы создаете вопрос, таймер и тп. По срабатыванию события сбрасываете счётчик

Comments

[SherbakovFirst]

Cпасибо. Да, знаю что код неидеален, но и не профи. буду улучшать с каждым разом

[Александр Талалаев]

SherbakovFirst, та, идеальный код это миф) Главное чтобы приносил пользу(профит компании, удобство пользователям продукта и тп и тд от контекста), минимизация дыр в безопасности, удобство разработки(прежде всего в команде) и производительность. Примерно в таком порядке. И тк польза на первом месте, то нередко легаси и тп может быть весьма странным.
Поэтому в целом по жизни отходите от задачи, потом от понимания кода(командой, но и в тч собой, чтобы через пол года открыв было понятно что тут), а потом уже оптимизации и правильные вещи. Нередко две последние связаны между собой, ну и со временем уже параллельно в голове работает. Но стараться сделать идеально, да даже хорошо с первого раза, бывает вредно для главной задачи.

[SherbakovFirst]

Александр Талалаев, Да, полностью с тобой согласен, спустя это время. Есть прекрасный принцип YAGNI, осознав который я стал даже с большим удовольствием программировать
Всё со временем становится плохим, даже хороший код переписывают)