javascript - Jquery 窗口滚动。只打一次

Question

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

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

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

感谢您的回答:)

Answer 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;
        }
    }
});

Answer 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;
    }
});

Answer 3

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

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

http://underscorejs.org/#debounce

使用很简单：

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