jQuery अनंत स्क्रॉल - स्क्रॉलिंग तेज होने पर ईवेंट कई बार आग लगता है

Question

ठीक है, जब आप पृष्ठ के निचले भाग तक स्क्रॉल करते हैं तो नीचे "कोड" कोड नीचे AJAX फ़ंक्शन निकाल दिया जाता है और परिणाम # पोस्टस्ट्रापर div पर जोड़े जाते हैं पृष्ठ।

समस्या यह है: यदि मैं पृष्ठ के निचले हिस्से तक पहुंचने पर वास्तव में तेज़ी से स्क्रॉल करता हूं, तो AJAX कई बार आग लगती है और परिणामों के कई सेट #postswrapper div में लोड करती है (अतिरिक्त, 'अवांछित' परिणामों की संख्या निर्धारित होती है जल्दी स्क्रॉल करके कितने अतिरिक्त स्क्रॉल ईवेंट निकाल दिए गए थे)।

आखिरकार, मुझे उपयोगकर्ता द्वारा नीचे तक पहुंचने पर केवल परिणामों के एक सेट की आवश्यकता होती है। मैंने टाइमर और इस तरह जोड़ने की कोशिश की है, लेकिन इसका कोई फायदा नहीं हुआ है। यह स्पष्ट रूप से डीओएम में अतिरिक्त स्क्रॉल क्रियाओं को संग्रहीत कर रहा है और उसके बाद अनुक्रमिक क्रम में उन्हें फायर कर रहा है।

कोई विचार?

मैं jquery.1.4.4.js का उपयोग कर रहा हूं अगर यह किसी की मदद करता है। और e.preventDefault() इस स्थिति में, वैसे भी काम नहीं करता है।

$(window).scroll(function(e) { 
    e.preventDefault(); 
    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) { 
     $('div#loadmoreajaxloader').show(); 
     $.ajax({ 
      cache: false, 
      url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'), 
      success: function(html) { 
       if (html) { 
        $('#postswrapper').append(html); 
        $('div#loadmoreajaxloader').hide(); 
       } else { 
        $('div#loadmoreajaxloader').html(); 
       } 
      } 
     }); 
    } 
}); 

Answer 1

किसी प्रकार का डेटा संग्रहीत करने का प्रयास करें जो स्टोर करता है कि पृष्ठ वर्तमान में नई वस्तुओं को लोड कर रहा है या नहीं। हो सकता है कि इस तरह:

$(window).data('ajaxready', true).scroll(function(e) { 
    if ($(window).data('ajaxready') == false) return; 

    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) { 
     $('div#loadmoreajaxloader').show(); 
     $(window).data('ajaxready', false); 
     $.ajax({ 
      cache: false, 
      url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'), 
      success: function(html) { 
       if (html) { 
        $('#postswrapper').append(html); 
        $('div#loadmoreajaxloader').hide(); 
       } else { 
        $('div#loadmoreajaxloader').html(); 
       } 
       $(window).data('ajaxready', true); 
      } 
     }); 
    } 
}); 

Ajax अनुरोध भेज दिया जाता है सही से पहले, एक झंडा वाचक है कि दस्तावेज़ अधिक अजाक्स अनुरोधों के लिए तैयार नहीं है को मंजूरी दे दी है। एक बार अजाक्स सफलतापूर्वक पूरा हो जाने पर, यह ध्वज को वापस सही पर सेट करता है, और अधिक अनुरोध ट्रिगर किए जा सकते हैं।