¿Qué hace "async: false" en jQuery.ajax ()?

256

Específicamente, ¿en qué se diferencia del valor predeterminado ( async: true)?

¿En qué circunstancias querría conjunto explícito asynca false, y lo hace tener algo que ver con la prevención de otros eventos en la página de disparar?

jquery Joe D
fuente
se parece a esta pregunta: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req hace que la llamada sea sincrónica. ...
CSharpAtl
Sí, me parece que debería llamarse algo más que "Ajax" (JavaScript asíncrono y XML) si no es asíncrono ...
devlord
Asíncrono significa que el script enviará una solicitud al servidor y continuará su ejecución sin esperar la respuesta. Tan pronto como se recibe la respuesta, se activa un evento del navegador, que a su vez permite que el script ejecute acciones asociadas.
SagarPPanchal

Respuestas:

300

¿Tiene algo que ver con evitar que se activen otros eventos en la página?

Si.

Establecer asíncrono en falso significa que la declaración que está llamando debe completarse antes de que se pueda llamar a la siguiente declaración en su función. Si configura async: true, esa declaración comenzará su ejecución y se llamará a la siguiente sin importar si la declaración asincrónica se ha completado todavía.

Para obtener más información, consulte: alcance de la función anónima jQuery ajax success

Sean Vieira
fuente
12
Siempre me he preguntado cómo se logró esto, ya que JavaScript no está enhebrado.
Matt
44
@ L.DeLeo, no, para nada, los aplazamientos son otra forma de gestionar la complejidad de las llamadas a funciones asincrónicas: async: false elimina completamente la asincronía de la llamada . La llamada a los ajax bloques : el código que sigue no se ejecuta hasta que el servidor ha respondido.
Sean Vieira
14
Recuerde que esto también significa que el navegador no capturará / activará ningún evento que ocurra mientras se ejecuta ajax. Descubrí esto de la manera difícil, tratando de descubrir por qué Firefox no estaba activando un evento de clic. Resultó ser debido a un evento de desenfoque "forzado" con una siguiente llamada de sincronización bloqueándolo.
PålOliver
3
@ Matt no, no lo es (más ^^) w3schools.com/html/html5_webworkers.asp
borrel
55
Parece que async: falseestá muerto, lo intenté y obtuve18: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= Código en pausa . (Otro código esperando que esto termine).
  • async:true= Código continuado . (Nada se detiene. Otro código no está esperando ).

Tan simple como esto.

夏 期 劇場
fuente
Bastante genérico "resto de código", explica el alcance del código que se está pausando.
Bart
26

Async:Falseretendrá la ejecución del código de descanso. Una vez que obtenga la respuesta de ajax, solo entonces, se ejecutará el resto del código.

Mohit
fuente
18

Si deshabilita la recuperación asincrónica, su secuencia de comandos se bloqueará hasta que se haya completado la solicitud. Es útil para realizar alguna secuencia de solicitudes en un orden conocido, aunque creo que las devoluciones de llamada asíncronas son más limpias.

John Millikin
fuente
Joe: eso dependería de si tienes hilos de trabajo en segundo plano.
John Millikin
10

Un caso de uso es hacer una ajaxllamada antes de que el usuario cierre la ventana o salga de la página. Esto sería como eliminar algunos registros temporales en la base de datos antes de que el usuario pueda navegar a otro sitio o cierre el navegador.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Tony
fuente
51
Ninguna cantidad de JavaScript detendrá el cierre de una ventana del navegador
jammykam
Necesitaba async false para algo completamente no relacionado, pero resolvió mi problema ya que permitió que mi script tomara un valor de un archivo xml antes de llenarlo en la página como indefinido.
J_L
8

De

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

XMLHttpRequest síncrono fuera de los trabajadores está en proceso de ser eliminado de la plataforma web ya que tiene efectos perjudiciales para la experiencia del usuario final. (Este es un proceso largo que lleva muchos años). Los desarrolladores no deben pasar falso por el argumento asíncrono cuando el entorno global de JavaScript es un entorno de documentos. Se recomienda encarecidamente a los agentes de usuarios que adviertan sobre dicho uso en las herramientas de desarrollador y que puedan experimentar lanzando una excepción InvalidAccessError cuando ocurra. La dirección futura es permitir solo XMLHttpRequests en subprocesos de trabajo. El mensaje pretende ser una advertencia a tal efecto.

i474232898
fuente
8

Establecer asíncrono en falso significa que las instrucciones que siguen a la solicitud ajax deberán esperar a que se complete la solicitud. A continuación se muestra un caso en el que hay que establecer asíncrono en falso para que el código funcione correctamente.

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

El ejemplo anterior explica claramente el uso de async: false

Al establecerlo en falso, nos hemos asegurado de que una vez que los datos se recuperan de la URL , solo después de eso devuelven php_data; se llama

Duro Gupta
fuente
En caso de que alguien más tenga el mismo problema que yo: esta respuesta destaca que la return php_datadeclaración no puede estar en la función de éxito, sino que debe estar fuera de la $.ajax()función. Había puesto mi equivalente del return php_datainterior success: function(){}y siempre volvía indefinido
gordon613
0

use esta opción decimales: 3

aquí está la 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
fuente