कतार AJAX

Question

हैलो मैं की तरह एक समानांतर स्क्रॉलिंग वेबसाइट कर रहा हूँ कॉल: http://vanityclaire.com/

हालांकि, बल्कि एक बड़े HTML फ़ाइल की तुलना में, मुखपृष्ठ के लोड के बाद, मैं घर के बच्चों में ajaxing कर रहा हूँ, jQuery का उपयोग कर। भार()।

वर्तमान में मैं प्रत्येक div और AJAX में उस यूआरएल में शीर्षक के लिए बैठता हूं। लेकिन AJAX आदेश से बाहर हो जाता है, और जैसा कि मैं और पेज जोड़ता हूं, स्पैंगिंग 30+ http: // अनुरोध वाले सर्वर को स्पैंग नहीं करता है।

मैं एजेक्स कॉल को सिंक्रनाइज़ तरीके से कैसे कर सकता हूं, यानी किसी दूसरे अनुरोध के पहले पहले वापसी की प्रतीक्षा करें, या एक समय में दो भेज दें।

मैं चिल्ला रहा हूं, और मुझे जो चाहिए वह पता नहीं लगा सकता।

<div id="mainLayout" class="fullwidth scrollArea"> 
    <div class="scrollItems"> 
     <div id="page-1" class="scrollItem" title="/"> 
     <div>HOME PAGE CONTENT</div> 
     </div> 
     <div id="page-2" class="scrollItem" title="/Page2.html"> 
     <div class="loading"> </div> 
     </div> 
     <div id="page-3" class="scrollItem" title="/Page3.html"> 
     <div class="loading"> </div> 
     </div> 

     <div id="page-4" class="scrollItem" title="/Page4.html"> 
     <div class="loading"> </div> 
     </div> 
     <div id="page-5" class="scrollItem" title="/Page5.html"> 
     <div class="loading"> </div> 
     </div> 
    </div> 
    </div> 

और मेरी जे एस:

function s_loadingInitialPages() { 
    var loadingItems = new Array(); 
    $(".scrollArea .scrollItem").each(function() { 
     if ($(this).attr('title') != '/') { 
      var oDelem = $(this); 
      loadingItems.push(oDelem); 
      //alert('test'); 
     } 
    }); 

    for (i = 0; i < loadingItems.length; i++) { 
     // title attribute is the URL to get 
     var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent='; 
     $(loadingItems[i]).load(ajaxURL); 

    } 
} 

वहाँ मैं सिर्फ एक कतार में कार्यों को जोड़ने रख सकते हैं, और कहा कि इसे संभाल करते हैं एक प्लगइन है

यह मेरी HTML है?

Answer 1

चाल कॉलबैक का उपयोग करना है। आप एक अजाक्स कॉल करते हैं और इसकी सफलता कॉलबैक पर आप अगली बनाते हैं।

ऐसा करने के लिए बस उन्हें एक कतार में जोड़ें और उसके चारों ओर एक रैपर रखें जो उन्हें एक-एक करके भेजता है।

मैंने कुछ दिन पहले लिखा था। मैं आपको एक सेकंड में एक कार्यान्वयन दिखाऊंगा।

// Buffer class. Has a public append method that expects some kind of Task. 
// Constructor expects a handler which is a method that takes a ajax task 
// and a callback. Buffer expects the handler to deal with the ajax and run 
// the callback when it's finished 
function Buffer(handler) { 
    var queue = []; 

    function run() { 
     var callback = function() { 
      // when the handler says it's finished (i.e. runs the callback) 
      // We check for more tasks in the queue and if there are any we run again 
      if (queue.length > 0) { 
        run(); 
      } 
     } 
     // give the first item in the queue & the callback to the handler 
     handler(queue.shift(), callback); 
    } 

    // push the task to the queue. If the queue was empty before the task was pushed 
    // we run the task. 
    this.append = function(task) { 
     queue.push(task); 
     if (queue.length === 1) { 
      run(); 
     } 
    } 

} 

// small Task containing item & url & optional callback 
function Task(item, url, callback) { 
    this.item = item; 
    this.url = url; 
    this.callback = callback 
} 

// small handler that loads the task.url into the task.item and calls the callback 
// when its finished 
function taskHandler(task, callback) { 
    $(task.item).load(task.url, function() { 
     // call an option callback from the task 
     if (task.callback) task.callback(); 
     // call the buffer callback. 
     callback(); 
    }); 
} 

// create a buffer object with a taskhandler 
var buffer = new Buffer(taskHandler); 

for (i = 0; i < loadingItems.length; i++) { 
    // title attribute is the URL to get 
    var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent='; 
    buffer.append(new Task(loadingItems[i], ajaxURL)); 
} 

कोड की दीवार के लिए माफ़ी। बस अपना खुद का कार्य और हैंडलर लागू करें। बफर तब तक काम करेगा जब तक कि हैंडलर दूसरे तर्क (कॉलबैक) को कॉल करता है जब यह कार्य को संभालने में समाप्त हो जाता है।

फिर बस इसे एक कार्य और एक हैंडलर पास करें। हैंडलर AJAX करता है और AJAX लौटने पर बफर से कॉलबैक कॉल करता है।

आपके विशिष्ट उदाहरण के लिए यदि आपकी लोडिंग में काफी समय लगता है तो यह 30 को लोड करने में काफी समय लगेगा। AJAX का बिंदु सर्वर को समानांतर में सामान करना है।

आपके मामले में एक बेहतर समाधान 30 अनुरोध करना है और फिर परिणामों को पकड़ना और सुनिश्चित करना है कि आपके AJAX कॉल के परिणाम केवल डोम में संलग्न हैं। इसमें $ .ajax का उपयोग करना और किसी भी तरह से ऑर्डर ट्रैक रखना शामिल है।

इस तरह से सर्वर इसे जितना तेज़ कर सकेगा और आप इसे प्राप्त करने के बाद इसे सर्वर पर कर सकते हैं। वैकल्पिक रूप से यदि आपके काम तेजी से होते हैं तो उन्हें बफर में कतार में कोई जुर्माना नहीं होता है।

Answer 2

अधिकांश ब्राउज़र एक ही डोमेन में 6 या अधिक एक साथ AJAX अनुरोधों को संभाल सकते हैं।
http://www.browserscope.org/?category=network&v=top

यदि आपकी स्क्रिप्ट 30 एजेक्स अनुरोधों को एक साथ रखती है, तो पहले 6 अनुरोध बहुत जल्दी से गुजरेंगे। उसके बाद, ब्राउज़र 5 सेकंड तक मनमाने ढंग से प्रतीक्षा अवधि असाइन करना शुरू कर सकता है। क्रोम इस व्यवहार का एक प्रमुख उदाहरण है।

अनुरोध 5-6 में 1-6 वापसी।

अनुरोध 5-1200 एमएस में 7-12 रिटर्न।

अनुरोध 11-18 10,005 एमएस में वापसी।

15,005 एमएस में अनुरोध 19-24 रिटर्न।

20,005 एमएस में 25-30 रिटर्न अनुरोध।

मैं आपके सभी एप्लिकेशन के AJAX अनुरोधों को संभालने के लिए फ़ंक्शन कॉलबैक की कतार बनाने की सलाह देता हूं और एक समय में उनमें से 6 से अधिक प्रक्रिया नहीं करता हूं।

var ajaxCownt = (ajaxCownt == null ? 0 : ajaxCownt); // Make limit globally accessible. 
 
var ajaxKue = (ajaxKue == null ? [] : ajaxKue); // Make queue globally accessible. 
 

 
function doMyAjaxRequest() { 
 
console.log("doing ajax request."); 
 
// Implement ajax request, here. 
 
} 
 

 
for (var i = 1;i <= 30;i++) { 
 
ajaxKue.push(function() { doMyAjaxRequest() }); // Add request to queue. 
 
} 
 

 
while (ajaxCownt != null && ajaxCownt < 6 && ajaxKue != null && ajaxKue.length && ajaxKue.length > 0) { 
 
ajaxCownt++; 
 
console.log("incrementing pending ajax requests counter by 1."); 
 
ajaxKue.shift().call(); 
 
}; 
 

 
// Register an event to detect when an ajax request completes. 
 
// Allow for an additional ajax request to be processed. 
 
$(document).ajaxComplete(function() { 
 
    if (ajaxCownt && ajaxCownt > 0) { 
 
     ajaxCownt--; 
 
     console.log("decrementing pending ajax requests counter by 1."); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>