Javascript無限滾動限制/反彈

Question

我在我的幾個頁面上設置了無限滾動功能。它工作得非常好，但Ajax調用來加載更多的項目會進行多次數據庫調用，並且每次都必須加載大量圖像，並且通常需要幾秒鐘才能加載。我根據我的連接在3到7秒之間計時。因此，當瀏覽器決定多次觸發滾動事件時，它會變成真正的火車殘骸。我怎麼能去限制或反彈它，以便瀏覽器在幾秒鐘內不會多次運行Ajax調用並將所有內容都暫停？

$(document).ready() 
{ 
    //Infinite scroll 
    $(window).on('scroll', _.debounce(function(){ 
     var height = $(window).height(); 
     var scrollTop = $(window).scrollTop(); 
     var dHeight = getDocHeight(); 

     if(height + scrollTop >= dHeight - 100) 
     { 
     //Display items that were previously hidden 
     showAllItems(); 
     if(!vloaded < START_NUM && !done){ 
      //Load next set of items 
      $.ajax 
      ({ 
       type: "POST", 
       url: "/organizer/getMore", 
       data: { filter: vfilter, loaded: vloaded }, 
       dataType: "html", 
       success: function(responseText, textStatus, XHR) 
       { 
       if(responseText.indexOf("// GRID ENTRY //") < 0){ //Out of items to load 
        done = true; 
       } 
       else{ 
        //Display items that were previously hidden 
        showAllItems(); 
        // select the element with the ID grid and insert the HTML 
        $("#grid").append(responseText); 
        //alert("Loaded "+vloaded+" items"); 
       } 
       } 
      }); 
      // global variable 
      vloaded +=LOAD_NUM; 
     } // if 
     } 
    } 
    }, 500, true)); // on 
} // ready 

編輯：

我下載了下劃線，並且增加了防抖動功能，但現在的Ajax調用似乎並沒有在所有運行。即使我沒有立即設置爲true，它也會在停止滾動後很快執行，但它根本不會執行。

Answer 1

下劃線庫有方法的：

• _.throttle()
• _.debounce()

你可能想_.debounce。如果您不想將Underscore添加爲其他依賴項，則可以從源代碼中爲所需方法創建獨立方法。

Answer 2

看看下劃線。他們有一個偉大的小debounce包裝，可以採取任何功能，並返回一個debounced版本。

您應該能夠使用該滾動回調函數並將其替換爲_.debounce(function(){ ... your code ... }, 100)。

如果您對實際的實現感到好奇，那麼源代碼很好，簡潔。

Answer 3

什麼對我的作品罰款是下面的代碼：

setupPaginationOnScroll: function() { 
    var self = this; 
    var loadNextPageIfNotLoadingThrottled = _.throttle(function() { 
     if (!self.isLastPageLoading()) { 
      self.loadNextPage() 
     } 
    },1000); 
    this.onScrollbarNearBottom(loadNextPageIfNotLoadingThrottled); 
}, 

你會注意到，我使用油門和不抖，當有未處理的請求，我簡單地忽略滾動事件

這個零件也可能會讓你感興趣：

onScrollbarNearBottom: function(callback) { 
    var target = this.getDOMNode(); 
    $(target).scroll(function(e) { 
     if (ScrollUtils.isScrollbarNearBottom(target)) { 
      callback(e); 
     } 
    }); 
} 



module.exports = { 

    debug: false, 

    /** 
    * We consider someone is near the bottom if he has scrolled more than 90% 
    */ 
    scrollNearThreshold: 90, 


    /** 
    * Useful function to detect for exemple when to load more content (ie another page) 
    * if the user has almost scrolled to the bottom 
    * 
    * @return {boolean} 
    */ 
    isWindowScrollbarNearBottom: function() { 
     return this.isScrollbarNearBottom(window); 
    }, 

    isScrollbarNearBottom: function(scrollableElementSelector) { 
     return this.getScrollPercentage(scrollableElementSelector) > this.scrollNearThreshold; 
    }, 


    /** 
    * Returns the percentage of scroll in a given container. 
    * If the scrollbar is at the beginning it should return 0. 
    * If the scrollbar is at the end it should return 100 (almost :s) 
    * 
    * See http://stackoverflow.com/questions/22867584/get-scroll-percentage-in-a-dom-container 
    * For an unknown reason it sometimes returns a value > 100 (like 103 if you are at the bottom) 
    * It is not very precise but at least it should work rather well for most usecases. 
    * 
    * @return {number} 
    */ 
    getScrollPercentage: function(scrollableElementSelector) { 

     var scrollableElement = $(scrollableElementSelector); 

     // This is the number of hidden pixels of the scrollable element inside its container 
     var hiddenHeigth; 
     if (scrollableElementSelector === window) { 
      hiddenHeigth = $(document).height() - $(window).height(); 
     } else { 
      hiddenHeigth = scrollableElement[0].scrollHeight - scrollableElement.outerHeight(); 
     } 

     // This is the number of scrolled pixels 
     var scrolledHeight = scrollableElement.scrollTop(); 

     //if (hiddenHeigth < scrolledHeight) { 
     //throw new Error("hiddenHeigth "+hiddenHeigth+" < scrolledHeight " +scrolledHeight + " -> Impossible unless you didn't use this function correctly"); 
     //} 

     var scrollPercent = (scrolledHeight/hiddenHeigth) * 100; 

     if (this.debug) { 
      console.debug("hiddenHeigth=",hiddenHeigth,"scrolledHeight=",scrolledHeight,"scrollPercent=",scrollPercent); 
     } 

     return scrollPercent; 
    } 

}