pause event while function runs

Question

I am writing an infinite scroll function and having it run if the $(window).scrollTop() is almost as large as the documents height, and it works perfectly...

The issue is that it takes a couple seconds for the new posts to load, and in that time, if the page was scrolled, the function was called multiple times before the document got larger and therefore did not load the posts the way I intented.

Can I add a line to a function that will pause a specific event (in this case the scroll event) until the function has finished executing?

function f(){
    //stop $(window).scroll
    //execute code
    //allow $(window).scroll
}
$(window).scroll(function(){
    if(condition){
        f();
    }
});

score 1 · Accepted Answer · answered Jul 24 '13 at 23:28

1

John Resig did a post on this awhile ago

Here is the code he used

didScroll = false;

$(window).scroll(function() {
     didScroll = true;
 });

setInterval(function() {
    if ( didScroll ) {
      didScroll = false;
      // Check your page position and then
      // Load in more results
   }
}, 250);

answered Jul 24 '13 at 23:28

dan_vitch

4,477
12
46
69

This nearly works, but it's still giving me some troubble...but good for now...maybe I should switch from .load to .ajax – Ryan Saxe Jul 25 '13 at 00:07
[Post](http://stackoverflow.com/questions/2076642/difference-between-id-load-and-ajax "Post") that may help you choose which to use – dan_vitch Jul 25 '13 at 16:40
I ended up using this with load! It works perfectly as long as the delay is between 500-1000. I just added a loading message as well as have it start firing earlier – Ryan Saxe Jul 25 '13 at 22:54

John · Answer 2 · 2013-07-24T22:52:16.577

0

You can use $.off to unbind an event, but I would recommend to just use a variable to keep track if its been triggered or not.

This snippet will prevent f from being called until the scrolling has been set to false again.

$(window).scroll(function(){
    if(this.scrolling == undefined)
        this.scrolling = false;

    if(this.scrolling == false){
        this.scrolling = true;
        f();
    }
});

function f(){
    //execute code
    window.scrolling = false;
}

edited Jul 24 '13 at 22:52

answered Jul 24 '13 at 22:45

John

5,942
3
42
79

@RyanSaxe make sure that window.scrolling = false; is in the ajax callback and not in the function that calls the ajax request. The code will continue to execute and enable the scrolling event before the new post was downloaded and inserted. – John Jul 24 '13 at 23:03

Jordan Gray · Answer 3 · 2013-07-25T07:50:40.783

0

You can remove the scroll event once it's called, then reattach it if/when the load posts request is completed:

function loadPosts() {
    if (condition) { // e.g. scrollTop almost equal to document height.
        $(window).off('scroll', loadPosts);
        $('[selector]').load('[URL-to-posts]', function(posts) {
            bindScroll();
            // Display posts.
        });
    }
}

// Binds the scroll event.
function bindScroll() {
    $(window).on('scroll', loadPosts);
}

$(bindScroll); // Call on document ready.

edited Jul 25 '13 at 07:50

answered Jul 24 '13 at 23:02

Jordan Gray

16,306
3
53
69

I'm using `.load', not '.ajax'...is there a significant reason other than more functionality for ajax over load? – Ryan Saxe Jul 25 '13 at 00:07
@RyanSaxe `load` is fine; `ajax` is a lower-level function that gives you a lot more control, but there's no reason to use it directly if you don't need it. (`load` calls `ajax` behind-the-scenes.) The important thing is that rebinding the scroll event in the callback means that it won't happen until the request completes. – Jordan Gray Jul 25 '13 at 08:03

pause event while function runs

3 Answers3