带有滚动侦听器的SetTimeout方法

Question

我有一个eventListener("滚动"(函数，当用户向下滚动25px时，它会触发一个类。如果用户什么都不做，则该类永远不会被触发。如果用户从不滚动，我该如何设置一个超时功能，该功能将在5秒后触发该类？

window.addEventListener("scroll", (e) => {
let sat = document.querySelector(".hero-images--sat");
let scrolled = window.pageYOffset;
const images = document.querySelectorAll(".hero-image");
if ((scrolled += 25)) {
sat.classList.add("appear");
}
for (let i = 0; i < images.length; i++) {
let pos = scrolled * images[i].dataset.rate;
if (images[i].classList.contains("hero-images--earth")) {
let pos = scrolled * images[i].dataset.rate - 48.75;
images[i].style.transform = `translate3d(-50%, ${pos}%, 0px)`;
} else {
images[i].style.transform = `translate3d(0%, ${pos}%, 0px)`;
}
}
});
.appear {
opacity: 1;
transition: all 0.3s linear;
top: 50%;
}

Answer 1

您可以在用户滚动后清除超时。看看这个：

滚动25px后，将调用addClass()。如果您不滚动，它将在5秒钟后被调用。

function addClass() {
let sat = document.querySelector(".hero-images--sat");
sat.classList.add("appear");
}
let timer = setTimeout(addClass, 5000);
window.addEventListener("scroll", (e) => {  
let scrolled = window.pageYOffset;
if (scrolled >= 25) {
clearTimeout(timer);
addClass();
}
});

p {
height: 100px;
}
.appear {
background: red;
}

<p>foo</p>
<p class="hero-images--sat">foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>

顺便说一句：检查你的if：if ((scrolled += 25))。+=可能不是你想要的。