How to prevent multiple Ajax requests

Question

I want to scroll down the page to a certain point (height of #first_column DIV), will get json from server-side and add content to #first_column.

Now the problem is when I scroll down to the height of #first_column, there are many Ajax call almost at the same time. What I want is scroll down to the height of #first_column, call server and get json data and add content to #first_column. The height of #first_column changes. Then I scroll down to the height of #first_column will get the second Ajax requests.

Any suggestions?

<script>
   $(window).scroll(function(){
   column_height = $("#first_column").height();
   screenTop = $(window).scrollTop();
   window_height = $(window).height();

if((screenTop+window_height)>=column_height){
      $.ajax({
            url: "/service/article_json.php",
            type: 'GET',
            async: false,
            cache: false,
            timeout: 30000,
            error: function(){
                return true;
            },
            success: function(data){ 
                $.each($.parseJSON(data), function(key,item) {

                  //Add content to #first_column

                });
            }
        });
  }
});

Answer 1

Try use a flag, for example:

var ajaxInProgress = false;

$(window).scroll(function() {
  if(ajaxInProgress) return;
  ajaxInProgress = true;

  $.ajax({
    // setup here
    success: {
      // ...
      ajaxInProgress = false;
    },
    error: {
      // ...
      ajaxInProgress = false;
    }
  });
});

In this example when ajaxInProgress is set to true window.scroll callback will simply return and perform no operation otherwise the flag will be set to true, the call will be performed and on success or on error callback the flag will be reset to false which will allow for another ajax call.

Answer 2

You can unbind the event as the first thing you do inside the if statement and then rebind it in the Success method if you so wish.

$(window).unbind('scroll');