JQuery，在滚动时一次运行一个函数答案

【问题标题】：JQuery, run function one at a time on scrollJQuery，在滚动时一次运行一个函数
【发布时间】：2022-01-21 04:23:57
【问题描述】：

所以，我将一个函数绑定到窗口滚动，但是当用户滚动时它会重复运行。

但我希望它在用户滚动时运行一次，当滚动结束时，当用户再次滚动时我希望它再次运行。

现在我的代码如下所示：

function whenScroll() {
    var zSection = $(".zSection").toArray();

    if (window.calc == -1) {
        $(zSection[window.zSecPos]).stop().slideToggle();
    } else {
        $(zSection[window.zSecPos-1]).stop().slideToggle();
    }
    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function() {
        if (window.calc == -1) {
            window.zSecPos = window.zSecPos + 1;
        } else {
            window.zSecPos = window.zSecPos - 1;
        }
    }, 250));
}

window.zSecPos = 0;
$(window).scroll(function() {
    whenScroll();
});

顺便说一下，window.calc表示滚动方向，我在另一个js文件中确定。

【问题讨论】：

clearTimeout 逻辑不起作用吗？也许您还需要将 slideToggles 移动到 setTimeout 中？帮助运行minimal reproducible example 会容易得多

标签： javascript html jquery

【解决方案1】：

我最终自己修复了它。对不起。

问题是我将所有页面长部分分开，我想在它们之间滚动。

所以，我的最终代码：

function whenScroll() {
    var zSection = $(".zSection").toArray();

    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function() {
        if (window.calc == -1) {
            if ($(zSection[window.zSecPos+1]).length) {
                $(zSection[window.zSecPos]).stop().animate({
                    top: "-100vh"
                }, 300);
                window.zSecPos = window.zSecPos + 1;
            }
        } else {
            if ($(zSection[window.zSecPos-1]).length) {
                $(zSection[window.zSecPos-1]).stop().animate({
                    top: "0"
                }, 300);
                window.zSecPos = window.zSecPos - 1;
            }
        }
        console.log(window.zSecPos);
    }, 300));
}

$(document).ready(function() {
    setTimeout(function() {
        $(".zSection").removeClass("displayNone");
    }, 1000);
});

window.zSecPos = 0;
$(window).scroll(function() {
    whenScroll();
});

【讨论】：