title: Can't stop scroll event from firing too many times
body: <p>So I have been reading up on this problem and have seen quite a lot of different solutions. At the moment my code looks like this: </p>
  
  <p>I am using this plugin: <a href="http://benalman.com/projects/jquery-throttle-debounce-plugin/" rel="nofollow">http://benalman.com/projects/jquery-throttle-debounce-plugin/</a></p>
  
  <pre><code>// Bind throttled scroll event to load new items when page is scrolled to the bottom.
  $(window).data('loading', false).scroll($.throttle(800, Olemas.ScrollLoad));
  
  Olemas.ScrollLoad = function()  {
    if ($(window).data('loading') == true) return;
    if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height())) {
        if (Olemas.NextPage &lt;= Olemas.MaxPage) {
            $(window).unbind('scroll'); // I have tried unbinding the event to stop it from launching
            Olemas.LoadMoreItems(Olemas.DivToUpdate); // load the new items
            $(window).data('loading', false).scroll($.throttle(800, Olemas.ScrollLoad)); // rebind scroll event.
        }
  
    }
  };
  </code></pre>
  
  <p>The problem is that even though the event is firing once every 800 ms. When I scroll to the bottom fast, the scroll event is firing too many times and the pages are loaded all wrong.</p>
  
  <pre><code>if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height()))
  </code></pre>
  
  <p>This statement should not pass after my items are loaded to the page, but it still passes a few times before it realizes the page height has changed. Is it possible that the height attributes are not updated quickly enough or the scroll events are already loaded into the DOM somehow?</p>
  
  <p>What can I do to stop the scroll event from firing after the LoadMoreItems function has expanded the page.</p>
  
  <p>EDIT. </p>
  
  <p>So in this function, the alerts are ran 2 times and then an alert in the LoadMoreItems ajax success.</p>
  
  <pre><code>Olemas.ScrollLoad = function()  {
  /// &lt;summary&gt;
  /// Loads more items when scrolled to the bottom.
  /// &lt;/summary&gt;
  if ($(window).data('loading') == true) return;
  if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height())) {
      if (Olemas.NextPage &lt;= Olemas.MaxPage) {
          alert(Olemas.NextPage); // This runs 2 times, before the LoadMoreItems changes the NextPage value
          $(window).off('scroll', $.throttle(800, Olemas.ScrollLoad));
  
          Olemas.LoadMoreItems(Olemas.DivToUpdate);
          $(window).data('loading', false).on('scroll', $.throttle(800, Olemas.ScrollLoad)); // rebind scroll event.
      }
  
  }
  };
  
  Olemas.LoadMoreItems = function () {
    $(window).data('loading', true);
    $.ajax({
        url: Olemas.ActionLink,
        data: { "page": Olemas.NextPage, "facId": Olemas.FacultyId },
        success: function (data) {
            $(".loadingImage").hide();
            $(data).appendTo(Olemas.DivToUpdate);
            alert("Done") // This is run after the previous alerts have fired 2 times.
            Olemas.NextPage++;
            Olemas.CheckPages();
        }
    });
    return false;
  
  };
  </code></pre>