Những gì async async: false sai làm gì trong jQuery.ajax ()?

256

Cụ thể, nó khác với mặc định ( async: true) như thế nào?

Trong hoàn cảnh nào tôi muốn thiết lập rõ ràng asyncđể false, và nó có một cái gì đó để làm với việc ngăn ngừa các sự kiện khác trên trang từ bắn?

jquery

— Joe D
nguồn

trông giống như câu hỏi này: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req làm cho đồng bộ cuộc gọi. ...

— CSharpAtl

Vâng, đối với tôi, nó nên được gọi là một cái gì đó không phải là "Ajax" (JavaScript không đồng bộ và XML) nếu nó không đồng bộ ...

— devlord

Không đồng bộ có nghĩa là tập lệnh sẽ gửi yêu cầu đến máy chủ và tiếp tục thực thi mà không cần chờ trả lời. Ngay khi nhận được trả lời, một sự kiện trình duyệt được kích hoạt, điều này cho phép tập lệnh thực thi các hành động liên quan.

— SagarPPanchal

300

Nó có liên quan gì đến việc ngăn các sự kiện khác trên trang không kích hoạt không?

Đúng.

Đặt async thành false có nghĩa là câu lệnh bạn đang gọi phải hoàn thành trước khi câu lệnh tiếp theo trong hàm của bạn có thể được gọi. Nếu bạn đặt async: true thì câu lệnh đó sẽ bắt đầu thực thi và câu lệnh tiếp theo sẽ được gọi bất kể câu lệnh async đã hoàn thành chưa.

Để hiểu rõ hơn, hãy xem: phạm vi hàm ẩn danh thành công của jQuery ajax

— Sean Vieira
nguồn

12

Tôi đã luôn tự hỏi làm thế nào điều này được thực hiện, vì JavaScript không được xâu chuỗi.

— Matt

4

@ L.DeLeo - không, hoàn toàn không - trì hoãn là một cách khác để quản lý sự phức tạp của các cuộc gọi chức năng không đồng bộ - async: false loại bỏ hoàn toàn tính không đồng bộ khỏi cuộc gọi . Cuộc gọi đến ajax các khối - mã theo sau nó không được thực thi cho đến khi máy chủ phản hồi.

— Sean Vieira

14

Hãy nhớ rằng điều này cũng có nghĩa là trình duyệt sẽ không nắm bắt / kích hoạt bất kỳ sự kiện nào xảy ra trong khi ajax đang được thực thi. Tôi đã tìm ra điều này một cách khó khăn, cố gắng tìm hiểu tại sao Firefox không kích hoạt sự kiện nhấp chuột. Hóa ra là do một sự kiện mờ "bắt buộc" với một cuộc gọi đồng bộ hóa sau chặn nó.

— PålOliver

3

@Matt không còn nữa (nữa ^^) w3schools.com/html/html5_webworkers.asp

— borrel 11/07/13

5

Có vẻ như async: falseđã chết, tôi đã thử và nhận được

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= Mã tạm dừng . (Mã khác đang chờ điều này kết thúc.)
async:true= Mã tiếp tục . (Không có gì bị tạm dừng. Mã khác không chờ đợi .)

Đơn giản như thế này.

— 期
nguồn

"Phần còn lại của mã" khá chung chung, giải thích phạm vi mã bị tạm dừng.

— bart

26

Async:Falsesẽ tổ chức thực thi mã còn lại. Khi bạn nhận được phản hồi của ajax, chỉ sau đó, phần còn lại của mã sẽ thực thi.

— Mohit
nguồn

18

Nếu bạn tắt truy xuất không đồng bộ, tập lệnh của bạn sẽ chặn cho đến khi yêu cầu được thực hiện. Nó hữu ích để thực hiện một số chuỗi yêu cầu theo thứ tự đã biết, mặc dù tôi thấy các cuộc gọi lại không đồng bộ sẽ sạch hơn.

— John Millikin
nguồn

Joe: điều đó phụ thuộc vào việc bạn có bất kỳ chủ đề công nhân nào trong nền không.

— John Millikin

10

Một trường hợp sử dụng là thực hiện ajaxcuộc gọi trước khi người dùng đóng cửa sổ hoặc rời khỏi trang. Điều này sẽ giống như xóa một số bản ghi tạm thời trong cơ sở dữ liệu trước khi người dùng có thể điều hướng đến một trang web khác hoặc đóng trình duyệt.

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

— Tony
nguồn

51

Không có lượng JavaScript nào ngăn cửa sổ trình duyệt đóng

— jammykam

Tôi cần async false cho một cái gì đó hoàn toàn không liên quan nhưng nó đã giải quyết vấn đề của tôi vì nó cho phép tập lệnh của tôi lấy một giá trị từ tệp xml trước khi đưa nó vào trang dưới dạng không xác định.

— J_L

8

Từ

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

XMLHttpRequest bên ngoài công nhân đang trong quá trình xóa khỏi nền tảng web vì nó có ảnh hưởng bất lợi đến trải nghiệm của người dùng cuối. (Đây là một quá trình dài phải mất nhiều năm.) Các nhà phát triển không được chuyển sai cho đối số async khi môi trường toàn cầu JavaScript là môi trường tài liệu. Các tác nhân người dùng được khuyến khích mạnh mẽ để cảnh báo về việc sử dụng như vậy trong các công cụ dành cho nhà phát triển và có thể thử nghiệm ném ngoại lệ UnlimitedAccessError khi xảy ra. Định hướng trong tương lai là chỉ cho phép XMLHttpRequests trong các luồng công nhân. Thông điệp được dự định là một cảnh báo cho hiệu ứng đó.

— i474232898
nguồn

8

Đặt async thành false nghĩa là các hướng dẫn theo yêu cầu ajax sẽ phải đợi yêu cầu hoàn thành. Dưới đây là một trường hợp người ta phải đặt async thành false, để mã hoạt động chính xác.

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;
})();

Ví dụ trên giải thích rõ ràng việc sử dụng async: false

Bằng cách đặt nó thành false, chúng tôi đã đảm bảo rằng một khi dữ liệu được truy xuất từ url , chỉ sau khi trả về php_data; được gọi là

— Gupta khắc nghiệt
nguồn

Chỉ trong trường hợp bất kỳ ai khác có cùng một vấn đề như tôi: Câu trả lời này nhấn mạnh rằng return php_datacâu lệnh không thể nằm trong hàm thành công, nhưng phải nằm ngoài $.ajax()hàm. Tôi đã đặt tương đương của tôi vào return php_databên trong success: function(){}và nó luôn luôn được trả lại không xác định

— gordon613

0

sử dụng số thập phân tùy chọn này : 3

đây là 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
nguồn