jQuery：真的很簡單的自制無限滾動

我知道有多個插件，但我不知道如何讓我自己的事情按我想要的方式工作。jQuery：真的很簡單的自制無限滾動

首先，當滾動到我的頁面底部時，我想觸發一個名爲ajaxLoadActivity的功能，該功能現在通過「顯示更多」按鈕觸發。

$(window).scroll(function() { 

      if ($(window).scrollTop() >= ($(document).height() - $(window).height())) 

       if ($('ol.astream > .loadCount:last > li').attr('id') == "noMoreActivities") 
        return false; 

       ajaxLoadActivity('bottom', true); 
       console.log('fired'); 

     });

我有這個問題，可能大家遇到的時候，試圖自己做這個。問題是該函數被多次觸發。功能ajaxLoadActivity做所有的ajax的東西，並將<li>項目添加到現有的<ol>。只需使用「Show More」按鈕即可使用該功能。

但是，我不知道如何在簡單地滾動到頁面底部時觸發相同的功能。但是我只想調用它一次 - 然後等待直到東西被加載 - 然後才允許再次觸發底部的功能。

而且我有一個例外已經在我上面的示例代碼中了......如果我的最後一個元素的ID爲noMoreActivities我不希望該函數被再次觸發，因爲那樣就沒有更多的活動了。

任何想法如何才能觸發該功能只有一次，並等待，直到請求發生？

來源

2012-05-04 matt

假設你正在使用$.post你可以在你ajaxLoadActivity函數返回它，然後檢查，看看是否它的運行

var ajax; 

$(window).scroll(function() { 

    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) 

     if ($('ol.astream > .loadCount:last > li').attr('id') == "noMoreActivities") 
      return false; 

     if (ajax) { 

      return false; // don't make another request, let the current one complete, or 
      // ajax.abort(); // stop the current request, let it run again 
     } 

     ajax = ajaxLoadActivity('bottom', true); 
     console.log('fired'); 

}); 

function ajaxLoadActivity(one, two) { 

    return $.post(/* stuff */); 
}

來源

2012-05-04 17:13:12

但是這隻被解僱一次，對吧？所以，如果我滾動到底部函數被調用，但是我希望功能再次觸發一次，我再次達到底部 – matt

'$（document）.height（）'會改變，所以它應該再次被觸發 –

會有人開始解釋爲什麼你使用這個特定的條件：$（document）.height（） - $（window）.height（））當頁面底部的scrolltop看起來並不總是大於document.height -window.height？爲什麼不使用scrolltop === document.height？ – fstopzero

$（窗口）.scrollTop（）== （$（文件）。 height（） - $（window）.height（））將使其僅執行一次調用。嘗試一下。

來源

2013-12-20 11:37:46 Saiesh

jQuery：真的很簡單的自制無限滾動

回答

相關問題