JQuery.ajax () में "async: false" क्या करता है?


256

विशेष रूप से, यह डिफ़ॉल्ट ( async: true) से कैसे भिन्न होता है ?

किन परिस्थितियों में मैं स्पष्ट सेट करने के लिए चाहते हो जाएगा asyncकरने के लिए false, और यह शुरू होने से ही पृष्ठ पर अन्य घटनाओं को रोकने के साथ कुछ है?


इस प्रश्न के समान दिखता है: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req कॉल को सिंक्रोनस बनाता है। ...
CSharpAtl

हाँ, मुझे ऐसा लगता है कि इसे "अजाक्स" (अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल) के अलावा कुछ और कहा जाना चाहिए अगर यह अतुल्यकालिक नहीं है ...
devlord

एसिंक्रोनस का मतलब है कि स्क्रिप्ट सर्वर को एक अनुरोध भेजेगा, और उत्तर की प्रतीक्षा किए बिना इसे जारी रखेगा। जैसे ही उत्तर प्राप्त होता है एक ब्राउज़र ईवेंट को निकाल दिया जाता है, जो बदले में स्क्रिप्ट को संबंधित कार्यों को निष्पादित करने की अनुमति देता है।
सागरपंचल

जवाबों:


300

क्या इसका पेज पर होने वाली अन्य घटनाओं को गोलीबारी से रोकने के लिए कुछ करना है?

हाँ।

Async को गलत पर सेट करने का मतलब है कि आप जिस स्टेटमेंट पर कॉल कर रहे हैं उसे आपके फंक्शन में अगले स्टेटमेंट से पहले पूरा करना है। यदि आप async सेट करते हैं: तो यह कथन सही है और निष्पादन शुरू हो जाएगा और अगले कथन को इस बात की परवाह किए बिना किया जाएगा कि क्या async कथन अभी तक पूरा नहीं हुआ है।

अधिक जानकारी के लिए देखें: jQuery ajax सफलता अनाम फ़ंक्शन गुंजाइश


12
मैंने हमेशा सोचा है कि यह कैसे पूरा किया गया, क्योंकि जावास्क्रिप्ट थ्रेडेड नहीं है।
मैट

4
@ L.DeLeo - नहीं, बिल्कुल भी नहीं - deferreds अतुल्यकालिक फ़ंक्शन कॉल की जटिलता के प्रबंधन का एक और तरीका है - कॉल async: false से अतुल्यकालिकता को पूरी तरह से हटा देता हैajax ब्लॉक करने के लिए कॉल - कोड जो इसका अनुसरण करता है, जब तक कि सर्वर ने प्रतिक्रिया नहीं दी है।
सीन विएरा

14
याद रखें कि इसका अर्थ यह भी है कि ब्राउज़र किसी भी घटना को कैप्चर / ट्रिगर नहीं करेगा, जबकि ajax निष्पादित हो रहा है। मुझे यह कठिन तरीका लगा, यह पता लगाने की कोशिश की कि फ़ायरफ़ॉक्स एक क्लिक इवेंट को ट्रिगर क्यों नहीं कर रहा था। यह निम्न सिंक कॉल के साथ "मजबूर" धब्बा घटना के कारण निकला जिससे यह अवरुद्ध हो गया।
पेलओलिवर

3
@Matt कोई यह (अब ^^) नहीं है w3schools.com/html/html5_webworkers.asp
borrel

5
ऐसा लगता है async: falseमर चुका है, मैं इसे करने की कोशिश की और मिल गया18:17:49.384 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ 1 jquery.js:9061:4
आबा

120
  • async:false= कोड रोका गया । (अन्य कोड इसके खत्म होने की प्रतीक्षा कर रहे हैं।)
  • async:true= कोड जारी रहा । (कुछ भी नहीं रोका गया। अन्य कोड प्रतीक्षा नहीं कर रहा है ।)

यह जितना सरल है।


बहुत सामान्य "कोड के बाकी", कोड के विराम के दायरे की व्याख्या करें।
बर्ट

26

Async:Falseबाकी कोड का निष्पादन करेगा। एक बार जब आपको अजाक्स की प्रतिक्रिया मिल जाती है, तभी, बाकी कोड निष्पादित होगा।


18

यदि आप अतुल्यकालिक पुनर्प्राप्ति को अक्षम करते हैं, तो अनुरोध पूरा होने तक आपकी स्क्रिप्ट अवरुद्ध हो जाएगी। यह ज्ञात क्रम में अनुरोधों के कुछ अनुक्रम को निष्पादित करने के लिए उपयोगी है, हालांकि मुझे क्लीनर होने के लिए async कॉलबैक मिलते हैं।


जो: यह इस बात पर निर्भर करेगा कि आपके पास पृष्ठभूमि में कोई कार्यकर्ता सूत्र है या नहीं।
जॉन मिलिकिन

10

ajaxउपयोगकर्ता द्वारा विंडो बंद करने या पृष्ठ छोड़ने से पहले कॉल करने का एक उपयोग मामला है । यह डेटाबेस में कुछ अस्थायी रिकॉर्ड को हटाने से पहले होगा जैसे उपयोगकर्ता किसी अन्य साइट पर नेविगेट कर सकता है या ब्राउज़र को बंद कर सकता है।

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });

51
जावास्क्रिप्ट की कोई राशि बंद होने से ब्राउज़र विंडो बंद नहीं होगी
जाममीकैम

मुझे पूरी तरह से असंबंधित कुछ के लिए async झूठे की आवश्यकता थी, लेकिन इसने मेरी समस्या को हल कर दिया क्योंकि इसने मेरी स्क्रिप्ट को एक xml फ़ाइल से मान को अपरिभाषित करने से पहले पृष्ठ पर पॉप्युलेट करने की अनुमति दी।
21

8

से

https://xhr.spec.whatwg.org/#synchronous-flag

श्रमिकों के बाहर सिंक्रोनस XMLHttpRequest वेब प्लेटफ़ॉर्म से निकाले जाने की प्रक्रिया में है क्योंकि इसका अंतिम उपयोगकर्ता के अनुभव पर हानिकारक प्रभाव पड़ता है। (यह एक लंबी प्रक्रिया है जिसमें कई वर्षों का समय लगता है।) डेवलपर्स को async तर्क के लिए गलत पास नहीं करना चाहिए जब जावास्क्रिप्ट वैश्विक वातावरण एक दस्तावेज़ वातावरण होता है। उपयोगकर्ता एजेंटों को डेवलपर टूल में इस तरह के उपयोग के बारे में चेतावनी देने के लिए दृढ़ता से प्रोत्साहित किया जाता है और ऐसा होने पर InvalidAccessError अपवाद को फेंकने के साथ प्रयोग कर सकते हैं। भविष्य की दिशा केवल कार्यकर्ता थ्रेड्स में XMLHttpRequests की अनुमति है। संदेश उस आशय के लिए एक चेतावनी है।


8

एसिंक्स को असत्य पर सेट करने का मतलब है कि अजाक्स अनुरोध के बाद निर्देशों को पूरा करने के लिए अनुरोध का इंतजार करना होगा। नीचे एक मामला है, जहां कोड को ठीक से काम करने के लिए किसी को async को गलत पर सेट करना है।

var phpData = (function get_php_data() {
  var php_data;
  $.ajax({
    url: "http://somesite/v1/api/get_php_data",
    async: false, 
    //very important: else php_data will be returned even before we get Json from the url
    dataType: 'json',
    success: function (json) {
      php_data = json;
    }
  });
  return php_data;
})();

उपरोक्त उदाहरण स्पष्ट रूप से async के उपयोग की व्याख्या करता है : गलत

इसे गलत पर सेट करके, हमने यह सुनिश्चित कर लिया है कि एक बार url से डेटा रिट्रीव हो जाने के बाद, उसके बाद ही php_data लौटें; कहा जाता है


बस किसी और के मामले में मेरे जैसी ही समस्या है: यह उत्तर इस बात पर प्रकाश डालता है कि return php_dataकथन सफलता के कार्य में नहीं हो सकता है, लेकिन $.ajax()कार्य के बाहर होना चाहिए । मैंने अपने return php_dataअंदर के बराबर को रखा था success: function(){}और यह हमेशा अपरिभाषित लौट रहा था
gordon613

0

इस विकल्प का उपयोग दशमलव: 3 करें

यहाँ url है: https://demos.telerik.com/kendo-ui/numerictextbox/index

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/numerictextbox/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>


</head>
<body>

        <div id="example">
            <div id="add-product" class="demo-section k-content">
                <p class="title">Add new product</p>
                <ul id="fieldlist">
                    <li>
                        <label>
                            Price:
                            <input id="currency" type="number" title="currency" value="30" min="0" max="100" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Price Discount:
                            <input id="percentage" value="0.05" title="percentage" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Weight:
                            <input id="custom" value="2" title="custom" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Currently in stock:
                            <input id="numeric" type="number" title="numeric" value="17" min="0" max="100" step="1" style="width: 100%;" />
                        </label>
                    </li>
                </ul>
            </div>


            <script>
                $(document).ready(function() {
                    // create NumericTextBox from input HTML element
                    $("#numeric").kendoNumericTextBox();

                    // create Curerncy NumericTextBox from input HTML element
                    $("#currency").kendoNumericTextBox({
                        format: "c",
                        decimals: 3
                    });

                    // create Percentage NumericTextBox from input HTML element
                    $("#percentage").kendoNumericTextBox({
                        format: "p0",
                        min: 0,
                        max: 0.1,
                        step: 0.01
                    });

                    // create NumericTextBox from input HTML element using custom format
                    $("#custom").kendoNumericTextBox({
                        format: "#.00 kg"
                    });
                });
            </script>

            <style>
                .demo-section {
                    padding: 0;
                }

                #add-product .title {
                    font-size: 16px;
                    color: #fff;
                    background-color: #1e88e5;
                    padding: 20px 30px;
                    margin: 0;
               }

               #fieldlist {
                   margin: 0 0 -1.5em;
                   padding: 30px;
               }

               #fieldlist li {
                   list-style: none;
                   padding-bottom: 1.5em;
               }

               #fieldlist label {
                   display: block;
                   padding-bottom: .6em;
                   font-weight: bold;
                   text-transform: uppercase;
                   font-size: 12px;
               }

               #fieldlist label .k-numerictextbox {
                   font-size: 14px;
               }
            </style>

        </div>


</body>
</html>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.