时间戳

首页 > 解决方案 > setTimeout 越来越快 - 我如何暂停它？

javascript - setTimeout 越来越快 - 我如何暂停它？

问题描述

我这里有这个脚本，效果很好。一旦元素滚动到视图中，它就会通过向上滚动来转换元素。但是一旦它滚动到视野之外，我就无法让它停止，更糟糕的是，它每次滚动到视野中时都会变得越来越快！如何重置超时？显然我使用 clearTimeout 错误，但我不知道如何解决它。

observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                reviewScroll();
            } else {
                stopReviewScroll();
                //What do I put here to pause reviewScroll?
            }
        });
});

var reviewscroller = document.querySelector('.ReviewList__reviewCardContainer__1hiY0');

function reviewScroll() {
    reviewscroller.style.opacity = 1;
    i++;
    reviewscroller.style.transform = 'translate3D(0px, -'+i+'px , 0px)';
    opac = i * .001;
    reviewscroller.style.opacity = 1-opac;
    clearTimeout(setTimeout(reviewScroll, 40));
    setTimeout(reviewScroll, 40);
    if (reviewscroller.style.opacity < -0.25) {
        reviewscroller.opacity = 1;
        i = 0;
        reviewscroller.style.transform = 'translate3D(0px, -'+i+'px , 0px)';
    }
}

function stopReviewScroll() {
    clearTimeout(reviewScroll);
}

document.querySelectorAll('.ReviewList__reviewCardContainer__1hiY0').forEach(image => { observer.observe(image); });

标签： javascriptsettimeout

解决方案

您应该取消旧计时器并安装一个新计时器，如下所示：

var timerId = null;

function reviewScroll() {

    // ...

    if (timerId) {
        clearTimeout(timerId);
    }
    timerId = setTimeout(reviewScroll, 40);

    // ...

}

推荐阅读