Che cosa fa "async: false" in jQuery.ajax ()?

256

In particolare, in che cosa differisce dal default ( async: true)?

In quali circostanze dovrei voler insieme esplicito asynca false, e lo fa avere a che fare con la prevenzione di altri eventi sulla pagina di sparare?

jquery

— Joe D
fonte

sembra simile a questa domanda: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req rende la chiamata sincrona. ...

— CSharpAtl,

Sì, mi sembra che dovrebbe essere chiamato qualcosa di diverso da "Ajax" (JavaScript asincrono e XML) se non è asincrono ...

— Devlord

Asincrono significa che lo script invierà una richiesta al server e continuerà l'esecuzione senza attendere la risposta. Non appena viene ricevuta la risposta, viene generato un evento del browser, che a sua volta consente allo script di eseguire le azioni associate.

— SagarPPanchal,

300

Ha qualcosa a che fare con la prevenzione dell'attivazione di altri eventi sulla pagina?

Sì.

L'impostazione di asincronizzazione su falso significa che l'istruzione che si sta chiamando deve essere completata prima di poter chiamare l'istruzione successiva nella funzione. Se imposti asincrono: vero, allora quell'istruzione inizierà l'esecuzione e l'istruzione successiva verrà chiamata indipendentemente dal fatto che l'istruzione asincrona sia stata ancora completata.

Per ulteriori informazioni, consultare: Ambito della funzione anonima di successo jQuery ajax

— Sean Vieira
fonte

12

Mi sono sempre chiesto come sia stato realizzato, dal momento che JavaScript non è thread.

— Matt,

4

@ L.DeLeo - no, per niente - i differiti sono un altro modo di gestire la complessità delle chiamate di funzione asincrone - async: false rimuove completamente l'asincrono dalla chiamata . La chiamata ai ajax blocchi : il codice che segue non viene eseguito fino a quando il server non ha risposto.

— Sean Vieira,

14

Ricorda che ciò significa anche che il browser non acquisirà / attiverà alcun evento durante l'esecuzione di Ajax. L'ho scoperto nel modo più difficile, cercando di capire perché Firefox non stava attivando un evento clic. Si è scoperto essere a causa di un evento di sfocatura "forzata" con una successiva chiamata di sincronizzazione che lo bloccava.

— PålOliver,

3

@Matt no non è (più ^^) w3schools.com/html/html5_webworkers.asp

— borrel

5

Sembra async: falsemorto, l'ho provato e ottenuto

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= Codice in pausa . (Altro codice in attesa che finisca.)
async:true= Codice continuato . (Nulla viene messo in pausa. L'altro codice non è in attesa .)

Semplice come questo.

— 夏期劇場
fonte

"Resto del codice" piuttosto generico, spiega la portata del codice in pausa.

— Bart

26

Async:Falseconterrà l'esecuzione del codice di riposo. Una volta ottenuta la risposta di Ajax, solo allora verrà eseguito il resto del codice.

— Mohit
fonte

18

Se disabiliti il recupero asincrono, lo script verrà bloccato fino a quando la richiesta non sarà stata soddisfatta. È utile per eseguire alcune sequenze di richieste in un ordine noto, anche se trovo che i callback asincroni siano più puliti.

— John Millikin
fonte

Joe: dipenderà dal fatto che tu abbia dei thread di lavoro in background.

— John Millikin,

10

Un caso d'uso è quello di effettuare una ajaxchiamata prima che l'utente chiuda la finestra o lasci la pagina. Questo sarebbe come eliminare alcuni record temporanei nel database prima che l'utente possa navigare su un altro sito o chiudere il browser.

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

— Tony
fonte

51

Nessuna quantità di JavaScript impedirà la chiusura di una finestra del browser

— jammykam,

Avevo bisogno di async false per qualcosa di completamente non correlato, ma ha risolto il mio problema poiché permetteva al mio script di acquisire un valore da un file XML prima di popolarlo sulla pagina come indefinito.

— J_L

8

A partire dal

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

XMLHttpRequest sincrono al di fuori dei lavoratori è in procinto di essere rimosso dalla piattaforma Web in quanto ha effetti dannosi per l'esperienza dell'utente finale. (Questo è un lungo processo che richiede molti anni.) Gli sviluppatori non devono passare false per l'argomento asincrono quando l'ambiente globale JavaScript è un ambiente documentale. Gli interpreti sono caldamente invitati ad avvertire di tale utilizzo negli strumenti di sviluppo e possono provare a lanciare un'eccezione InvalidAccessError quando si verifica. La direzione futura è consentire solo XMLHttpRequests nei thread di lavoro. Il messaggio vuole essere un avvertimento in tal senso.

— i474232898
fonte

8

Impostando async su false si intende che le istruzioni che seguono la richiesta ajax dovranno attendere il completamento della richiesta. Di seguito è riportato un caso in cui è necessario impostare async su false, affinché il codice funzioni correttamente.

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

L'esempio sopra spiega chiaramente l'uso di async: false

Impostando su false, abbiamo fatto in modo che una volta che i dati sono retreived dal URL , solo dopo che php_data di ritorno; è chiamato

— Duro Gupta
fonte

Nel caso in cui qualcun altro abbia lo stesso problema: questa risposta evidenzia che l' return php_dataaffermazione non può essere nella funzione di successo, ma deve essere esterna alla $.ajax()funzione. Avevo messo il mio equivalente return php_dataall'interno success: function(){}e stava sempre tornando indefinito

— gordon613

0

utilizzare questa opzione decimali: 3

ecco 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
fonte