title: How to prevent multiple AJAX calls when using JQuery scroll event handler during lazy-loading?
body: <p>I load data into my DIV with AJAX using 3 different functions. I am trying to  prevent multiple AJAX calls when the browser scroller remains at the bottom of the DIV that I am lazy-loading data into.</p>
  
  <p>This works but sometimes (just sometimes) the scroller remain at the bottom of my div and this will cause many AJAX calls to happen. How do I prevent that from happening?</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
  
      //form submit by click
      $("#submit").click(function(e) {
          // Prevent Default Action In Case to Load data by form
          e.preventDefault();
  
          //prevent select to post empty data
          $('select').each(function() {
              if ($(this).val() == '') {
                  $(this).attr('disabled', 'disabled');
              }
          });
  
          // Define what we need
          var loading = "&lt;img src='/zojfa/images/loading.gif' alt='Loading...' /&gt;";
          var scrolltop = $('#scrollbox').attr('scrollTop');
          var scrollheight = $('#scrollbox').attr('scrollHeight');
          var windowheight = $('#scrollbox').attr('clientHeight');
          var post = $(this).attr("name") + "=" + $(this).val();
          var form_data = $('#search_form').serialize() + "&amp;" + post;
          var scrolloffset = 20;
  
          //empty content if another value sent to code
          $('#content').empty();
          //load data
          loaddata(form_data, 0);
      });
  
      //listen to scroll function
      $('#scrollbox').scroll(function() {
  
          //define what we need
          var scrolltop = $('#scrollbox').attr('scrollTop');
          var scrollheight = $('#scrollbox').attr('scrollHeight');
          var windowheight = $('#scrollbox').attr('clientHeight');
          var scrolloffset = 20;
  
          //get number of div which will append to script in case of limit database to page 2 or 3 or...
          size = $('#content &gt; div').children().size();
  
  
  
          //if we reach to bottom of div we are going to call to ajax function
          if (scrolltop &gt;= (scrollheight - (windowheight + scrolloffset))) {
              var form_data = $('#formdata').val();
  
              //if remain of size(count of div) is 0 then we have more data to show because we limit data provided by script to 7 field(we handle situation that we had 14 or 21 respond from database in "next step" because if there is no data to show we dont have to let script to run)
              if (size % 7 == 0) {
                  //call to load data function
                  setTimeout(function() { loaddata(form_data, size) }, 1500);
              } else {
                  //do nothing its just in case we need to append something like no more data to load
              }
          }
      });
  
      // page load finish
  });
  
  
  //function to load data
  function loaddata(form_data, size) {
      number = "&amp;size=" + size;
      //fetch new items
      $.post('dosearch.php', form_data + number, function(newitems) {
          //next step : if page echoing "" then do nothing
          if (newitems == '') {} else {
              //if we have data append these data to our div's #content
              $('#content').append(newitems);
          }
      });
  }​
  </code></pre>
  
  <p><strong>update</strong></p>
  
  <p>I did just as dear <code>@Kent Pawar</code> and dear <code>@E.J. Brennan</code> said but now I get more AJAX calls when I reach to bottom of the div and it still doesn't quite work.</p>
  
  <pre class="lang-js prettyprint-override"><code>$("#submit").click(function(e) {
      // Do some Default
      e.preventDefault();
  
      $('select').each(function() {
          if ($(this).val() == '') {
              $(this).attr('disabled', 'disabled');
          }
      });
  
      // var what we need
      var loading = "&lt;img src='/zojfa/images/loading.gif' alt='Loading...' /&gt;";
      var scrolltop = $('#scrollbox').attr('scrollTop');
      var scrollheight = $('#scrollbox').attr('scrollHeight');
      var windowheight = $('#scrollbox').attr('clientHeight');
      var post = $(this).attr("name") + "=" + $(this).val();
      var form_data = $('#search_form').serialize() + "&amp;" + post;
      var scrolloffset = 20;
  
      $('#content').empty();
  
      //load data
      loaddata(form_data, 0);
      $('select').each(function() {
          if ($(this).val() == '') {
              $(this).removeAttr('disabled');
          }
      });
  });
  
  
  $('#scrollbox').scroll(function() {
      //var what we need
      var scrolltop = $('#scrollbox').attr('scrollTop');
      var scrollheight = $('#scrollbox').attr('scrollHeight');
      var windowheight = $('#scrollbox').attr('clientHeight');
      var scrolloffset = 20;
  
      // when we reach
      size = $('#content &gt; div').children().size();
  
      if ($('#scrollbox').data('ajaxready') === false)
          return;
  
      if (scrolltop &gt;= (scrollheight - (windowheight + scrolloffset))) {
          $('#scrollbox').data('ajaxready', false);
          var form_data = $('#formdata').val();
  
          if (size % 7 == 0) {
              setTimeout(function() { loaddata(form_data, size) }, 1500);
          } else {
  
          }
      }
      $('#scrollbox').data('ajaxready', true);
  
      // page load finish
  });
  
  function loaddata(form_data, size) {
      number = "&amp;size=" + size;
      //fetch new items
      $.post('dosearch.php', form_data + number, function(newitems) {
          if (newitems == '') {} else {
              $('#content').append(newitems);
          }
      });
  }
  </code></pre>