अजाक्स (सिंक्रोनस) के दौरान ब्राउज़र लॉकिंग रोकें?

Question

जो मैं करने की कोशिश कर रहा हूं वह एक लोडिंग छवि को एक div में जोड़ना है (इसलिए उपयोगकर्ता जानता है कि कुछ लोड हो रहा है) और फिर मैं एक jquery AJAX फ़ंक्शन को कॉल करता हूं, जो "async: false" पर सेट है।

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
     type: "POST", /* this goesn't work with GET */ 
     url: urlValue, /*ex: "NBAgetGamesList.php" */ 
     data: parameters, /*ex: "param1=hello" */ 
     cache: false, 
     async: false, 
        success: function(data){ 

        } 
}); 

समस्या यह है कि ब्राउज़र ताले और बाद ajax कॉल किया जाता है जो निश्चित रूप से बेकार है जब तक लोड हो रहा है छवि संलग्न नहीं करता है: यहाँ मेरी कोड है। फ़ायरफ़ॉक्स एकमात्र ब्राउज़र है जो वास्तव में लोडिंग छवि को जोड़ता है। आईई, क्रोम, और सफारी लोडिंग छवि को संलग्न नहीं करते हैं।

मुझे पता है कि ब्राउजर लॉकिंग होता है क्योंकि एसिंक झूठी पर सेट है लेकिन यह मेरा एकमात्र विकल्प है क्योंकि मुझे जारी रखने से पहले इस अनुरोध को पूरा करने की प्रतीक्षा करनी है क्योंकि मुझे वापस आने वाले डेटा की आवश्यकता है।

क्या इसके आसपास कोई रास्ता है? अगर मैं लोडिंग छवि को जोड़ता हूं तो मैं एक चेतावनी देता हूं जो काम करता है लेकिन मैं नहीं चाहता कि हर बार एक चेतावनी पॉप-अप हो।

Answer 1

इसके विपरीत आपके दावे के बावजूद आप को सिंक्रोनस होने की आवश्यकता नहीं है। प्रतिक्रिया के साथ/प्रतिक्रिया के बाद आपको जो भी करने की आवश्यकता है, सफलता (और/या त्रुटि या पूर्ण) कॉलबैक में किया जा सकता है। तो बदलने के लिए:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: false, 
    ... 
}); 
// OTHER CODE 

इस तरह होने के लिए:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: true, 
    success: function(data) { 
     // OTHER CODE 
    } 
}); 

या एक अलग समारोह है कि आप सफलता कॉलबैक से कॉल करने के लिए ले जाने के "अन्य कोड"।

आप कुछ की तुलना में आप एक समारोह में ऊपर संपुटित और इसे करने के लिए एक कॉलबैक गुजारें सकता है कि और अधिक जटिल की जरूरत है:

function doAjaxStuff(callback) { 
    $jQuery("#playersListDiv").html(loadingImage);  
    $jQuery.ajax({ 
     ... 
     async: true, 
     success: function(data) { 
      // optional other processing here, then: 
      callback(data); 
     } 
    }); 
} 

// then from somewhere else in your code: 
doAjaxStuff(function(data) { 
    // do something with data 
}); 

Answer 2

आप क्या चाहते हैं jQuery.Deferred() है।

Answer 3

मैं इस मुद्दे में आए और मैं इसके लिए एक समाधान मिल गया।
मान लीजिए! आपको का उपयोग अपने ajax request में वास्तव में करने की आवश्यकता है और आप ajax अनुरोध के निष्पादन के दौरान लोडिंग छवि दिखाना चाहते हैं। लेकिन ajax अनुरोध async : false के कारण अन्य यूआई ऑपरेशन (लोडिंग छवि प्रदर्शित करना) को रोक रहा है। तो, इसके लिए सरल समाधान, लोडिंग छवि को छिपाने के लिए लोडिंग छवि और fadeOut प्रदर्शित करने के लिए fadeIn का उपयोग करें।

यहां jsFiddle डेमो है जिसमें async : false के साथ अनुरोध है। इसके कारण, लोडिंग छवि प्रदर्शित नहीं हो रही है। (लोडिंग छवि को प्रदर्शित करने के लिए मैंने show विधि का उपयोग किया था।)।

फ़ेडइन और फीडऑट प्रभाव के साथ एक और jsFiddle है। यह अनुरोध में async : false पर ध्यान दिए बिना लोडिंग छवि प्रदर्शित करता है।