Co robi „async: false” w jQuery.ajax ()?

256

W szczególności, czym różni się od default ( async: true)?

W jakich okolicznościach chciałbym wyraźnej zestaw asyncdo false, i to ma coś wspólnego z zapobieganiem inne imprezy na stronie z wypalania?

jquery Joe D.
źródło
wygląda podobnie do tego pytania: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req sprawia, że ​​połączenie jest synchroniczne. ...
CSharpAtl
Tak, wydaje mi się, że powinien być nazywany coś innego niż „Ajax” (Asynchronous JavaScript and XML), jeśli nie jest asynchroniczny ...
devlord
Asynchroniczny oznacza, że ​​skrypt wyśle ​​żądanie do serwera i będzie kontynuował wykonywanie bez oczekiwania na odpowiedź. Zaraz po otrzymaniu odpowiedzi uruchamiane jest zdarzenie przeglądarki, które z kolei umożliwia skryptowi wykonanie powiązanych działań.
SagarPPanchal

Odpowiedzi:

300

Czy ma to coś wspólnego z zapobieganiem uruchamianiu innych zdarzeń na stronie?

Tak.

Ustawienie asynchronicznej wartości false oznacza, że ​​wywoływana instrukcja musi zostać wypełniona, zanim będzie można wywołać następną instrukcję w funkcji. Jeśli ustawisz async: true, instrukcja ta rozpocznie wykonywanie, a następna instrukcja zostanie wywołana bez względu na to, czy instrukcja async zakończyła się.

Aby uzyskać więcej informacji, patrz: zakres anonimowej funkcji jQuery ajax sukces

Sean Vieira
źródło
12
Zawsze zastanawiałem się, jak to osiągnąć, ponieważ JavaScript nie jest podzielony na wątki.
Matt
4
@ L.DeLeo - nie, wcale - odroczenia to kolejny sposób zarządzania złożonością wywołań funkcji asynchronicznych - async: false całkowicie usuwa asynchroniczność z wywołania . Wywołanie do ajax bloków - następujący po nim kod nie jest wykonywany, dopóki serwer nie zareaguje.
Sean Vieira,
14
Pamiętaj, że oznacza to również, że przeglądarka nie będzie przechwytywać / wyzwalać żadnych zdarzeń mających miejsce podczas wykonywania ajax. Dowiedziałem się tego na własnej skórze, próbując dowiedzieć się, dlaczego Firefox nie wyzwalał zdarzenia kliknięcia. Okazało się, że jest to spowodowane „wymuszonym” rozmyciem, które blokuje kolejne wywołanie synchronizacji.
PålOliver
3
@Matt nie to nie jest (już ^^) w3schools.com/html/html5_webworkers.asp
borrel
5
Wygląda na async: falseto, że nie żyje, próbowałem i dostałem18: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= Kod wstrzymany . (Inny kod czeka na zakończenie.)
  • async:true= Kod kontynuowany . (Nic się nie zatrzymuje. Inny kod nie czeka .)

Tak proste jak to.

夏 期 劇場
źródło
Całkiem ogólna „reszta kodu”, wyjaśniająca zakres kodu, który został wstrzymany.
Bart
26

Async:Falsewstrzyma wykonanie kodu odpoczynku. Gdy otrzymasz odpowiedź ajax, tylko wtedy reszta kodu zostanie wykonana.

Mohit
źródło
18

Jeśli wyłączysz pobieranie asynchroniczne, skrypt będzie blokował się do momentu spełnienia żądania. Jest to przydatne do wykonywania niektórych sekwencji żądań w znanej kolejności, chociaż uważam, że wywołania asynchroniczne są czystsze.

John Millikin
źródło
Joe: to zależy od tego, czy masz w tle wątki robocze.
John Millikin,
10

Jednym z przypadków użycia jest wykonanie ajaxpołączenia, zanim użytkownik zamknie okno lub opuści stronę. To tak, jakby usunąć tymczasowe rekordy w bazie danych, zanim użytkownik będzie mógł przejść do innej witryny lub zamknąć przeglądarkę.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Tony
źródło
51
Żadna ilość JavaScript nie powstrzyma okna przeglądarki przed zamknięciem
jammykam
Potrzebowałem asynchronicznego fałszu dla czegoś zupełnie niezwiązanego, ale to rozwiązało mój problem, ponieważ pozwoliło mojemu skryptowi pobrać wartość z pliku xml przed umieszczeniem go na stronie jako niezdefiniowana.
J_L
8

Z

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

Synchroniczne XMLHttpRequest poza pracownikami jest w trakcie usuwania z platformy internetowej, ponieważ ma szkodliwy wpływ na doświadczenie użytkownika końcowego. (Jest to długi proces, który trwa wiele lat). Programiści nie mogą przekazywać argumentu asynchronicznego, gdy globalne środowisko JavaScript jest środowiskiem dokumentów. Zaleca się, aby programy klienckie ostrzegały przed takim użyciem w narzędziach programistycznych i mogą eksperymentować z zgłaszaniem wyjątku InvalidAccessError, gdy wystąpi. Przyszłym kierunkiem jest zezwolenie na XMLHttpRequests tylko w wątkach roboczych. Wiadomość ma być ostrzeżeniem w tym zakresie.

i474232898
źródło
8

Ustawienie asynchronicznej wartości false oznacza, że ​​instrukcje następujące po żądaniu ajax będą musiały poczekać na zakończenie żądania. Poniżej znajduje się jeden przypadek, w którym należy ustawić async na false, aby kod działał poprawnie.

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

Powyższy przykład jasno wyjaśnia użycie async: false

Ustawiając wartość false, upewniliśmy się, że gdy dane zostaną odzyskane z adresu URL , dopiero po tym zwrócą php_data; jest nazywany

Ostra Gupta
źródło
Na wypadek, gdyby ktoś miał taki sam problem jak ja: Ta odpowiedź podkreśla, że return php_datainstrukcja nie może być w funkcji sukcesu, ale musi znajdować się poza $.ajax()funkcją. Umieściłem swój odpowiednik return php_datawewnątrz success: function(){}i zawsze wracał niezdefiniowany
Gordon 613
0

użyj tej opcji miejsc po przecinku: 3

tutaj jest adres 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
źródło