setTimeout в прослушивателе событий

Question

У меня есть некоторый опыт работы с html, css и javascript, и я хочу начать делать несколько проектов ... Я хочу сделать эту целевую страницу сам.

задержка при нажатии кнопок навигации около 0,3 или 0,5, затем прокрутите до раздела, который я пытался использовать setTimeout в данном случае, но он не работает.

Даже у меня не было ошибок в консоли.

Я много искал, как использовать setTimeout() в событиях, но ничего не работало.

Два кода, которые я пробовал:

function scrollToClick() {
    navbar.addEventListener('click', setTimeout(function (event) {
        const clicked = document.querySelector('#' + event.target.dataset.nav)
        clicked.scrollIntoView({behavior: "smooth"});
    }), 1000)
    
};

function scrollToClick() {
    setTimeout(function(){navbar.addEventListener('click', function (event) {
        const clicked = document.querySelector('#' + event.target.dataset.nav)
        clicked.scrollIntoView({behavior: "smooth"} );
    });}, 100)
    
};

примечание: код прокручивается без проблем, но не ждет

Answer 1

Поместите setTimeout в обратный вызов.

function scrollToClick() {
    navbar.addEventListener('click', function (event) {
        setTimeout( () => {
               const clicked = document.querySelector('#' + event.target.dataset.nav)
               clicked.scrollIntoView({behavior: "smooth"});
         }, 1000)
    })
};

Пример:

document.getElementById("test").addEventListener('click', function (event) {
    setTimeout( () => {
          console.log("A clicked happend 1000ms ago")
     }, 1000)
})

<button id="test">Click</button>