Как перезапустить setTimeOut при клике?

Question

[Денис]

Небольшой скринкаст показа проблемы.
https://monosnap.com/file/Yz9CT27PpmlzGFfzDFTNhIRa...

Если словами, блок навигации внутри модалки должен появлятся спустя секунду полторы,после обновления страницы все ок, но если покликать пару раз по кнопке открытия модалки, то текс появляется раньше. И н красиво выходит.
Как при новом клике можно сделать повторение этого setTimeOut?
ClearInterval совсем убирает и текст внутри не появляется
Вот код

function mainModalFunc() {
    const mainModalBtn = document.querySelector('.burger-menu')
    const mainModal = document.querySelector('.main-modal')
    const mainmModaContent = document.querySelector('.main-modal__content')

    mainModalBtn.addEventListener('click' , function test () {
        mainModal.classList.toggle('main-modal_active')
    console.log('+')


    let timer = setTimeout(function showUpAnimation () {
        mainmModaContent.style.opacity = '1'
    }, 1000);
})

}

mainModalFunc()

Comments

[Stalker_RED]

ClearInterval совсем убирает и текст внутри не появляется

у вас вообще нет интервалов же?

[Денис]

Stalker_RED, так а зачем мне интервал?

[Stalker_RED]

Денис, я без понятия зачем вы о нем пишете.

[Денис]

Stalker_RED, упс, опечаточка, хотел написать cleattimeout

Answer 1

[Stalker_RED]

clearTimeout, чтобы удалить старый таймаут, и setTimeout с новым значением.

Comments

[Денис]

а удаление старого и создание нового должно делаться внутри функции addEventListener?

[Stalker_RED]

Денис, addEventListener - это не функция.
возможно лучшим решением будет добавить css-анимацию на .main-modal_active, и на js останется только это

document.querySelector('.btn-burger-menu').addEventListener('click' , function() {
    document.querySelector('.main-modal').classList.toggle('main-modal_active')
})

А таймауты вообще не нужны.

[Денис]

Stalker_RED, Так у нее и так стоит своя анимация, посмотрите маленький скринкастик в ссылке поймете о чем я.

[Stalker_RED]

Денис, ну и что мешает видимость текста привязать к этой которая "и так стоит"?

Ну или как я вчера и предлагал -

clearTimeout, чтобы удалить старый таймаут, и setTimeout с новым значением.

[Денис]

Stalker_RED, да вот я пытался ваш вчерашний вариант опробовать и не получилось, видимо а не там объявлял и убирал таймауты
Если делал вот так

function mainModalFunc() {
    const mainModalBtn = document.querySelector('.burger-menu')
    const mainModal = document.querySelector('.main-modal')
    const mainmModaContent = document.querySelector('.main-modal__content')

    mainModalBtn.addEventListener('click' , function test () {
    mainModal.classList.toggle('main-modal_active')
    console.log('+')


    let timer = setTimeout(function showUpAnimation () {
        mainmModaContent.classList.add('main-modal__content_active')
    }, 1500);
    
    clearTimeout(timer)
    
    let timer = setTimeout(function showUpAnimation () {
        mainmModaContent.classList.add('main-modal__content_active')
    }, 1500);
    })
    
}

mainModalFunc()

Но не правильно получается.
Я запутался где и как их объявлять и заркывать

[Stalker_RED]

Денис, зачем два раза

let timer = setTimeout(function showUpAnimation () {

?
Объявление переменной timer нужно вынести за пределы обработчика клика, иначе при следующем клике вы его не увидите же.