Was macht "async: false" in jQuery.ajax ()?

256

Wie unterscheidet es sich konkret von der Standardeinstellung ( async: true)?

Unter welchen Umständen würde ich mag ausdrücklich Satz asyncauf false, und hat es etwas mit der Verhütung von anderen Veranstaltungen auf der Seite zu tun , von dem Brennen?

jquery Joe D.
quelle
sieht dieser Frage ähnlich: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req macht den Anruf synchron. ...
CSharpAtl
Ja, scheint mir, es sollte etwas anderes als "Ajax" (asynchrones JavaScript und XML) heißen, wenn es nicht asynchron ist ...
Devlord
Asynchron bedeutet, dass das Skript eine Anforderung an den Server sendet und die Ausführung fortsetzt, ohne auf die Antwort zu warten. Sobald eine Antwort eingeht, wird ein Browserereignis ausgelöst, das es dem Skript wiederum ermöglicht, zugehörige Aktionen auszuführen.
SagarPPanchal

Antworten:

300

Hat dies etwas damit zu tun, dass andere Ereignisse auf der Seite nicht ausgelöst werden können?

Ja.

Wenn Sie async auf false setzen, muss die aufgerufene Anweisung abgeschlossen sein, bevor die nächste Anweisung in Ihrer Funktion aufgerufen werden kann. Wenn Sie async: true festlegen, beginnt die Ausführung dieser Anweisung und die nächste Anweisung wird aufgerufen, unabhängig davon, ob die asynchrone Anweisung noch abgeschlossen wurde.

Weitere Informationen finden Sie unter: Anonymer Funktionsumfang von jQuery ajax success

Sean Vieira
quelle
12
Ich habe mich immer gefragt, wie dies erreicht wurde, da JavaScript kein Thread ist.
Matt
4
@ L.DeLeo - nein, überhaupt nicht - Zurückgestellte sind eine weitere Möglichkeit, die Komplexität asynchroner Funktionsaufrufe zu verwalten - async: false entfernt die Asynchronität vollständig aus dem Aufruf . Der Aufruf von ajax Blöcken - der darauf folgende Code wird erst ausgeführt, wenn der Server geantwortet hat.
Sean Vieira
14
Denken Sie daran, dass dies auch bedeutet, dass der Browser keine Ereignisse erfasst / auslöst, die während der Ausführung von Ajax auftreten. Ich fand das auf die harte Tour heraus und versuchte herauszufinden, warum Firefox kein Klickereignis auslöste. Es stellte sich heraus, dass ein "erzwungenes" Unschärfeereignis durch einen folgenden Synchronisierungsaufruf blockiert wurde.
PålOliver
3
@ Matt nein es ist nicht (mehr ^^) w3schools.com/html/html5_webworkers.asp
Borrel
5
Es scheint async: falsetot zu sein, ich habe es versucht und bekam18: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= Code angehalten . (Anderer Code, der darauf wartet, dass dies beendet wird.)
  • async:true= Code fortgesetzt . (Nichts wird angehalten. Anderer Code wartet nicht .)

So einfach ist das.

夏 期 劇場
quelle
Ziemlich allgemeiner "Rest des Codes", erklären Sie den Umfang des angehaltenen Codes.
Bart
26

Async:Falsehält die Ausführung des Restcodes. Sobald Sie eine Antwort von Ajax erhalten, wird nur dann der Rest des Codes ausgeführt.

Mohit
quelle
18

Wenn Sie den asynchronen Abruf deaktivieren, wird Ihr Skript blockiert, bis die Anforderung erfüllt wurde. Es ist nützlich, um eine Reihe von Anforderungen in einer bekannten Reihenfolge auszuführen, obwohl ich asynchrone Rückrufe als sauberer empfinde.

John Millikin
quelle
Joe: Das hängt davon ab, ob Sie Worker-Threads im Hintergrund haben.
John Millikin
10

Ein Anwendungsfall besteht darin, einen ajaxAnruf zu tätigen , bevor der Benutzer das Fenster schließt oder die Seite verlässt. Dies entspricht dem Löschen einiger temporärer Datensätze in der Datenbank, bevor der Benutzer zu einer anderen Site navigieren oder den Browser schließen kann.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Tony
quelle
51
Keine Menge JavaScript verhindert das Schließen eines Browserfensters
jammykam
Ich brauchte async false für etwas völlig Unabhängiges, aber es löste mein Problem, da mein Skript einen Wert aus einer XML-Datei abrufen konnte, bevor er auf der Seite als undefiniert ausgefüllt wurde.
J_L
8

Von

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

Die synchrone XMLHttpRequest außerhalb der Mitarbeiter wird gerade von der Webplattform entfernt, da sie sich nachteilig auf die Benutzererfahrung auswirkt. (Dies ist ein langer Prozess, der viele Jahre dauert.) Entwickler dürfen für das asynchrone Argument nicht false übergeben, wenn die globale JavaScript-Umgebung eine Dokumentumgebung ist. Benutzeragenten werden dringend gebeten, vor einer solchen Verwendung in Entwicklertools zu warnen, und können versuchen, eine InvalidAccessError-Ausnahme auszulösen, wenn sie auftritt. Die zukünftige Richtung besteht darin, XMLHttpRequests nur in Arbeitsthreads zuzulassen. Die Nachricht soll eine entsprechende Warnung sein.

i474232898
quelle
8

Wenn Sie async auf false setzen, müssen die Anweisungen nach der Ajax-Anforderung warten, bis die Anforderung abgeschlossen ist. Im Folgenden finden Sie einen Fall, in dem Async auf false gesetzt werden muss, damit der Code ordnungsgemäß funktioniert.

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

Das obige Beispiel erklärt deutlich die Verwendung von Async: false

Indem wir es auf false setzen, haben wir sichergestellt, dass, sobald die Daten von der URL abgerufen wurden , erst danach php_data zurückgegeben wird. wird genannt

Harte Gupta
quelle
Nur für den Fall, dass jemand das gleiche Problem wie ich hat: Diese Antwort hebt hervor, dass die return php_dataAnweisung nicht in der Erfolgsfunktion enthalten sein kann, sondern außerhalb der $.ajax()Funktion liegen muss. Ich hatte mein Äquivalent des return php_dataInneren in das gesetzt success: function(){}und es kehrte immer undefiniert zurück
gordon613
0

Verwenden Sie diese Option Dezimalstellen: 3

Hier ist die 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
quelle