Jquery 窗口滚动。只打一次答案

【问题标题】：Jquery window scroll. call just one timeJquery 窗口滚动。只打一次
【发布时间】：2015-07-30 07:02:39
【问题描述】：

您好，我有一个关于 jquery 窗口滚动功能的问题。我有类似这样的代码。

$(window).scroll(function(){
        if($(window).scrollTop() > $(".pages").offset().top) {
            $('.top-slider').slick('slickPause');
        }else {
            $('.top-slider').slick('slickPlay');
        }
    });

如果 first 为真，则每次滚动时它都会调用每个 1px 滚动窗口。如果为真则只调用一次但如果其他为真则检查滚动是否只调用一次？

感谢您的回答:)

【问题讨论】：

标签： javascript jquery call window-scroll

【解决方案1】：

尝试使用标志，如下所示：

var paused = false;

$(window).scroll(function(){
    if( $(window).scrollTop() > $(".pages").offset().top ) {
        if( !paused ){
            $('.top-slider').slick('slickPause');
            paused = true;
        }        
    }else {
        if( paused ){
            $('.top-slider').slick('slickPlay');
            paused = false;
        }
    }
});

【讨论】：

【解决方案2】：

在这里添加一个测试变量将是一个解决方案：

var checkDown = true; 
var checkUp   = false;
$(window).scroll(function(){
    if($(window).scrollTop() > $(".pages").offset().top && checkDown ) {
        $('.top-slider').slick('slickPause');
        checkDown = false;
        checkUp   = true;
    }else if(checkUp) {
        $('.top-slider').slick('slickPlay');
        checkDown = true;
        checkUp   = false;
    }
});

【讨论】：

两个布尔值表示两个状态？

【解决方案3】：

我告诉你另一种解决方案，是去抖动器。 Debounce 函数使滚动和调整事件更有效，因为在第一个触发事件结束之前停止事件触发。

您可以使用 underscore.js 库查看去抖动功能。

http://underscorejs.org/#debounce

使用简单：

var debounced = _.debounce(myFunction, 1000);
$(window).scroll(debounced);

【讨论】：

这很酷，但我不想以一种简单的方式包含大型库。但感谢它很酷的图书馆
这是一个例子，你可以只复制debouncer的代码。你可以在这里看到它：davidwalsh.name/function-debounce 并且你不需要包含一个库。注意：下划线不是一个大库。它非常小。