javascript - Jquery window scroll. call just one time - Stack Overflow

admin管理员组

文章数量:1349240

Hi I have one question about jquery window scroll function. I have code somthing like this.

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

Ok every time when you scroll if first is true it call every 1px scrolled window. Is that way to call just one time if true but check on scroll if other is true call that just one time?

Thanks for your answers :)

Hi I have one question about jquery window scroll function. I have code somthing like this.

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

Ok every time when you scroll if first is true it call every 1px scrolled window. Is that way to call just one time if true but check on scroll if other is true call that just one time?

Thanks for your answers :)

• javascript
• jquery
• call
• window-scroll

Share Improve this question Follow asked Jul 30, 2015 at 7:02 Aram MkrtchyanAram Mkrtchyan 2,70044 gold badges3535 silver badges4848 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Try with a flag, something like this:

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

Adding a test variable will be a solution here :

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

I tell you another solution, is a debouncer. Debounce functions make scroll and resize events more efficient, because stop the event firing till the end of the first fired event.

You can view a debounce function with underscore.js library.

http://underscorejs/#debounce

The use is simple:

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

本文标签： javascriptJquery window scroll call just one timeStack Overflow