जबकि jQuery

Question

में ajax अनुरोध कर

मैं अपने लोड हो रहा है स्पिनर को दिखाने के लिए, जबकि मेरी jQuery कोड में AJAX अनुरोध कर निम्नलिखित mockup उपयोग कर रहा हूँ लोडिंग स्पिनर देरी:

jQuery.ajaxSetup({ 
beforeSend: function() { 
    $('#loader').show() 
}, 
complete: function(){ 
    $('#loader').hide() 
}, 
success: function() { 
    $('#loader').hide() 
} 
}); 

इस कोड मेरे लिए बिल्कुल ठीक काम करता है!

बस एक समस्या:

कुछ अनुरोध सिर्फ बहुत ही सरल और तेजी से कर रहे हैं, इसलिए लोड हो रहा है स्पिनर सिर्फ millisecs के एक जोड़े के लिए दिखाया गया है। बेशक यह बहुत सुंदर नहीं है।

इसलिए लोडिंग स्पिनर को थोड़ा देरी दिखाने के लिए मैंने setTimeout() का उपयोग करने का प्रयास किया। मैं चाहता हूं कि यह केवल पॉप अप करें यदि AJAX अनुरोध कम से कम लेते हैं, तो हम 100ms कहें, लेकिन यह काम नहीं करता है।

इसलिए मुझे ऊपर बताए गए लोडिंग स्पिनर में देरी करने के लिए कुछ कोड चाहिए, इसलिए यह केवल "लंबे" AJAX अनुरोध करते समय पॉप अप करता है!

Answer 1

सामान्य समाधान जो मैंने देखा है, वह दूसरे या दो के लिए थ्रोबर को ऊपर रखना है, भले ही अनुरोध उस से तेज़ हो जाए। की तरह कुछ: तो यह मामला निर्भर है कि क्या आपको लगता है कि हिट या नहीं ले जाना चाहते है

var loaded = false; 
var throbbed = false; 

function checkComplete(){ 
    if(loaded && throbbed){ 
     $("#loader").hide(); 
    } 
} 

function requestComplete(){ 
    loaded = true; 
    checkComplete(); 
} 

jQuery.ajaxSetup({ 
beforeSend: function() { 
    $('#loader').show(); 
    setTimeout(function(){ 
     throbbed = true; 
     checkComplete(); 
    }, 500); 

}, 
complete: requestComplete, 
success: requestComplete 
}); 

जाहिर है इस सुंदर लग रही की कीमत पर चीजें धीमी बनाने की एक दुविधा है। यदि यह ऐसा कुछ है जो हर समय उपयोग किया जाता है, तो शायद आप बदसूरत को स्वीकार करने से बेहतर हैं। यदि ऐसा कुछ ऐसा होता है जो हर बार और थोड़ी देर में होता है, तो उपयोगकर्ताओं को अतिरिक्त 500 मिलियन नहीं दिखाई देंगे।

var timeout; 

jQuery.ajaxSetup({ 
beforeSend: function() { 
    timeout = window.setTimeout(function() { 
     timeout = null; 
     $('#loader').show(); 
    }, 100); 
}, 
complete: function(){ 
    if (timeout) { 
     window.clearTimeout(timeout); 
     timeout = null; 
    } 
    $('#loader').hide() 
}, 
success: function() { 
    // No need to do anything here since complete always will be called 
} 
}); 

अब आप इस थोड़ा सुधार करने की आवश्यकता है, तो आप एक ही समय में कई अनुरोध सक्रिय हो रहे हैं, लेकिन:

Answer 2

यह कैसे मैं अपने उल्लेख कार्यक्षमता का समाधान

var loading; 
    $("#loader").hide(); 
    jQuery.ajaxSetup({ 
     beforeSend: function() { 
      loading= setTimeout("$('#loader').show()", 300); 
     }, 
     complete: function(){ 
      clearTimeout(loading); 
      $("#loader").hide(); 
     }, 
     success: function() { 
      alert("done"); 
     } 
    }); 

Answer 3

यह काम करना चाहिए है उम्मीद है कि आपको तस्वीर मिल जाएगी।

Answer 4

अब उत्तर दें क्योंकि मुझे एक ही समस्या आती है और ये उत्तर मुझे समाधान का हिस्सा देते हैं। AJAX अनुरोध पूरा होने के बाद प्रारंभिक स्पिनर से बचने के लिए समय समाप्ति का समय निष्पादन स्क्रिप्ट से बड़ा है, आपको ऊपर/नीचे ध्वज जांच की आवश्यकता है, यह बहुत आसान है और मेरे लिए काम है।

var m = $('.modal-ajax'); 
var run = false; // global scope is necessary 
m.hide(); // if isn't hidden in css 

jQuery.ajaxSetup({ 
    beforeSend: function() { 
     run = true; // up flag   
     d = setTimeout(function(){ 
      if(run) // is ajax executing now? 
       m.show(); 
     },100); // is trigged only for NO fast response 
    }, 
    complete: function(){ 
     m.hide(); 
     run = false; // down flag     
    }, 
    success: function() {    
    // do stuff 
    } 
}); 

Answer 5

यह एक पुराना सवाल है लेकिन मुझे एक बहुत अच्छा और सुरुचिपूर्ण दृष्टिकोण मिला है। jQuery एक चर $.active का खुलासा करता है जो वर्तमान में सक्रिय AJAX अनुरोधों की संख्या है। ajaxSend से पहले इसका मूल्य बढ़ता है और ajaxComplete के बाद घटता है।

इसे ध्यान में रखते

, सभी हम क्या करने की जरूरत स्पिनर दिखाने जब ajaxSend$.active == '1' निकाल दिया और और स्पिनर को छिपाने है जब ajaxComplete निकाल दिया और $.active == '1' जाता है। यहां मेरा कोड है जो वर्तमान में बेकार ढंग से काम कर रहा है।

$(document).ajaxSend(function(event, request, settings) { 
    $.active == '1' ? $('#spinner').show() : ''; 
}); 

$(document).ajaxComplete(function(event, request, settings) { 
    $.active == '1' ? $('#spinner').hide() : ''; 
}); 

उम्मीद है कि यह किसी की सहायता करेगा।