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

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