title: Window scroll event fires multiple times
body: <p>I am working with a Marionette.js app that fetches more data as the user scrolls down the page.</p>
  
  <pre><code>setupWindowScrollListener: function() {
              var $window = $(window),
                  $document = $(document),
                  that = this;
  
              $window.on('scroll', _.debounce(function() {
                  var scrollTop = $window.scrollTop(),
                      wHeight = $window.height(),
                      dHeight = $document.height(),
                      margin = 100;
  
                  if(scrollTop + wHeight &gt; dHeight - margin) {
                      eventer.trigger('fetch:more:products');
                  }
              }, 500));
          }
  </code></pre>
  
  <p>The problem is that when the user scrolls down to the bottom of the page, the <code>eventer</code> is firing off multiple events instead of just one.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Code with isLoading check</p>
  
  <pre><code>    setupWindowScrollListener: function() {
          var $window = $(window),
              $document = $(document),
              that = this,
              isLoading = false;
  
          $window.on('scroll', _.throttle(function() {
              if(!isLoading) {
                  var scrollTop = $window.scrollTop(),
                      wHeight = $window.height(),
                      dHeight = $document.height(),
                      margin = 100;
  
                  if(scrollTop + wHeight &gt; dHeight - margin) {
                      isLoading = true;
                      eventer.trigger('fetch:more:products');
                      isLoading = false;
                  }
              }
          }, 500));
      }
  </code></pre>