title: How to avoid multiple JavaScript function calls in Infinite Scrolling
body: <p>I'm using this JavaScript functions to create a JSP page with Infinite Scroll feature.</p>
  <pre><code>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
  
  var count = 0;
  
  window.onload = loadSubPage;
  
  $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
      alert(&quot;load appLeadershipSubView function calling&quot;);
          loadSubPage();
      }
  });
  
  function loadSubPage()
  {
      alert(&quot;load appLeadershipSubView called&quot;);
          $.ajax({
          cache: false,
          url: 'appLeadershipSubView.do?count=' + count,
          async : true,
          beforeSend: function(){
          },
          success: function(html){
              alert(&quot;success event&quot;);
              $('#mainDiv').append(html);
              count++;
          },
          complete: function(){
          }
      }
      );
  } 
  
  &lt;/script&gt; 
  </code></pre>
  <hr />
  <p>As you can see
  I'm calling the <code>loadSubPage</code> function to append html content in the <code>appLeadershipSubView</code> page into the <code>#mainDiv</code>.
  And <code>loadSubPage</code> is also called at the page Load event also.</p>
  <p>The Problem is when I scroll down it makes multiple (2 sometimes 3) calls to the <code>loadSubPage</code> function and appends duplicate data into the div.</p>
  <p>Since I'm new to JSP and Javascript I couldn't figure out the problem here.
  Can you please point me out the problem here?</p>