Question

我在html，css和javascript中有一些经验，我想开始做一些项目...我想自己做一个landing page。

导航按钮onclick延迟约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>

事件监听器中的setTimeout

1 个答案: