“ async: false” ทำอะไรใน jQuery.ajax ()

256

โดยเฉพาะมันแตกต่างจากค่าเริ่มต้น ( async: true) อย่างไร

ในสถานการณ์สิ่งที่ฉันต้องการชุดอย่างชัดเจนasyncไปfalseและไม่ได้มีสิ่งที่จะทำอย่างไรกับการป้องกันเหตุการณ์อื่น ๆ บนหน้าจากการยิง?

jquery

— โจดี
แหล่งที่มา

มีลักษณะคล้ายกับคำถามนี้: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-reqทำให้ซิงโครโทร ...

— CSharpAtl

ใช่ดูเหมือนว่าฉันควรจะเรียกสิ่งอื่นที่ไม่ใช่ "Ajax" (Asynchronous JavaScript และ XML) หากไม่ใช่ asynchronous ...

— devlord

อะซิงโครนัสหมายความว่าสคริปต์จะส่งการร้องขอไปยังเซิร์ฟเวอร์และดำเนินการต่อโดยไม่ต้องรอการตอบกลับ ทันทีที่ได้รับการตอบกลับเหตุการณ์ของเบราว์เซอร์จะเริ่มทำงานซึ่งจะทำให้สคริปต์สามารถดำเนินการที่เกี่ยวข้องได้

— SagarPPanchal

300

มีบางอย่างเกี่ยวข้องกับการป้องกันไม่ให้เหตุการณ์อื่น ๆ บนหน้าเว็บถูกยิงหรือไม่

ใช่.

การตั้งค่า async เป็น false หมายถึงคำสั่งที่คุณกำลังเรียกใช้ให้เสร็จสมบูรณ์ก่อนที่จะเรียกใช้คำสั่งถัดไปในฟังก์ชันของคุณ หากคุณตั้งค่า async: จริงแล้วคำสั่งนั้นจะเริ่มต้นการดำเนินการและจะเรียกใช้คำสั่งถัดไปโดยไม่คำนึงว่าคำสั่ง async นั้นเสร็จสิ้นแล้วหรือยัง

สำหรับข้อมูลเชิงลึกเพิ่มเติมโปรดดูที่: jQuery ajax สำเร็จขอบเขตฟังก์ชั่นที่ไม่ระบุชื่อ

— ฌอนวิเอรา
แหล่งที่มา

12

ฉันสงสัยอยู่เสมอว่าวิธีการนี้ทำได้อย่างไรเนื่องจาก JavaScript ไม่ได้เป็นเธรด

— แมตต์

4

@ L.DeLeo - ไม่มีไม่ได้ทั้งหมด - deferreds มีวิธีการในการจัดการความซับซ้อนของฟังก์ชั่นการโทรไม่ตรงกันอีก - async: false เอา asynchronousity จากสายสมบูรณ์ การเรียกไปยังajax บล็อก - รหัสที่ตามมาจะไม่ถูกดำเนินการจนกว่าเซิร์ฟเวอร์จะตอบกลับ

— ฌอน Vieira

14

โปรดจำไว้ว่านี่หมายความว่าเบราว์เซอร์จะไม่บันทึก / เรียกใช้เหตุการณ์ใด ๆ ที่เกิดขึ้นในขณะที่ ajax กำลังถูกดำเนินการ ฉันพบสิ่งนี้ด้วยวิธีที่ยากพยายามหาสาเหตุที่ Firefox ไม่ทำให้เกิดเหตุการณ์คลิก มันกลายเป็นเพราะเหตุการณ์เบลอ "ถูกบังคับ" ที่มีการเรียกการซิงค์ต่อไปนี้ปิดกั้น

— PålOliver

3

@ ไม่ว่าจะไม่ใช่ (อีกต่อไป ^^) 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

— Aba

120

async:false= รหัสหยุดชั่วคราว (รหัสอื่นกำลังรอให้การดำเนินการนี้เสร็จสิ้น)
async:true= รหัสต่อไป (ไม่มีอะไรหยุดชั่วคราวรหัสอื่นไม่รอ )

ง่ายๆเช่นนี้

— 夏期劇場
แหล่งที่มา

พริตตี้ "รหัสที่เหลือ" ทั่วไป, อธิบายขอบเขตของโค้ดที่ถูกหยุดชั่วคราว

— บาร์

26

Async:Falseจะระงับการเรียกใช้รหัสที่เหลือ เมื่อคุณได้รับการตอบสนองของ ajax เท่านั้นส่วนที่เหลือของรหัสจะดำเนินการ

— Mohit
แหล่งที่มา

18

หากคุณปิดใช้งานการดึงแบบอะซิงโครนัสสคริปต์ของคุณจะบล็อกจนกว่าคำขอจะได้รับการตอบสนอง มีประโยชน์สำหรับการดำเนินการตามลำดับของคำขอตามลำดับที่ทราบแม้ว่าฉันจะพบว่าการเรียกกลับแบบอะซิงก์นั้นสะอาดกว่า

— John Millikin
แหล่งที่มา

โจ: นั่นจะขึ้นอยู่กับว่าคุณมีเธรดผู้ทำงานอยู่เบื้องหลังหรือไม่

— John Millikin

10

กรณีใช้งานอย่างหนึ่งคือการajaxโทรออกก่อนที่ผู้ใช้จะปิดหน้าต่างหรือออกจากหน้า นี่จะเป็นการลบระเบียนชั่วคราวบางส่วนในฐานข้อมูลก่อนที่ผู้ใช้จะสามารถนำทางไปยังไซต์อื่นหรือปิดเบราว์เซอร์

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

— โทนี่
แหล่งที่มา

51

จาวาสคริปต์จะไม่หยุดการทำงานของหน้าต่างเบราว์เซอร์

— jammykam

ฉันต้องการ async false สำหรับบางสิ่งที่ไม่เกี่ยวข้องอย่างสมบูรณ์ แต่ก็แก้ปัญหาของฉันได้เนื่องจากสคริปต์ของฉันสามารถรับค่าจากไฟล์ xml ก่อนที่จะนำไปวางบนหน้าเว็บโดยไม่ได้กำหนด

— J_L

8

จาก

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

Synchronous XMLHttpRequest นอกคนงานกำลังอยู่ในขั้นตอนการลบออกจากแพลตฟอร์มเว็บเนื่องจากมีผลเสียต่อประสบการณ์ของผู้ใช้ (นี่เป็นกระบวนการที่ใช้เวลานานหลายปี) นักพัฒนาจะต้องไม่ส่งค่าเท็จสำหรับอาร์กิวเมนต์ async เมื่อสภาพแวดล้อมส่วนกลางของ JavaScript เป็นสภาพแวดล้อมของเอกสาร ตัวแทนผู้ใช้ควรได้รับการสนับสนุนอย่างยิ่งให้เตือนเกี่ยวกับการใช้งานดังกล่าวในเครื่องมือของนักพัฒนาซอฟต์แวร์และอาจทำการทดลองโดยการโยนข้อยกเว้น InvalidAccessError เมื่อมันเกิดขึ้น ทิศทางในอนาคตคืออนุญาต XMLHttpRequests ในเธรดผู้ปฏิบัติงานเท่านั้น ข้อความมีไว้เพื่อเป็นคำเตือนถึงผลกระทบนั้น

— i474232898
แหล่งที่มา

8

การตั้งค่า async เป็น false หมายถึงคำแนะนำที่ตามหลังคำขอ ajax จะต้องรอคำขอให้เสร็จสมบูรณ์ ด้านล่างเป็นกรณีหนึ่งที่ต้องตั้งค่า 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: falseอย่างชัดเจน

โดยการตั้งค่าเป็นเท็จเราได้ตรวจสอบให้แน่ใจว่าเมื่อข้อมูลถูกดึงกลับมาจากurlหลังจากที่ส่งคืน php_data เท่านั้น ถูกเรียก

— Hup Gupta
แหล่งที่มา

ในกรณีที่คนอื่นมีปัญหาเช่นเดียวกับฉัน: คำตอบนี้เน้นว่า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>

— Samir Lakhani
แหล่งที่มา