O que "async: false" faz em jQuery.ajax ()?

256

Especificamente, como ele difere do padrão ( async: true)?

Em que circunstâncias eu gostaria de definir explicitamente asynccomo falsee isso tem algo a ver com impedir que outros eventos na página sejam disparados?

jquery Joe D
fonte
parece semelhante a esta pergunta: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req torna a chamada síncrona. ...
CSharpAtl 25/09/09
Sim, parece-me que deve ser chamado de algo diferente de "Ajax" (Asynchronous JavaScript and XML) se não é assíncrona ...
devlord
Assíncrono significa que o script enviará uma solicitação ao servidor e continuará sua execução sem aguardar a resposta. Assim que a resposta é recebida, um evento do navegador é acionado, o que, por sua vez, permite que o script execute ações associadas.
SagarPPanchal

Respostas:

300

Isso tem algo a ver com impedir que outros eventos sejam disparados na página?

Sim.

Definir async como false significa que a instrução que você está chamando deve ser concluída antes que a próxima instrução em sua função possa ser chamada. Se você definir async: true, essa instrução começará sua execução e a próxima instrução será chamada, independentemente de a instrução async já ter sido concluída.

Para obter mais informações, consulte: jQuery ajax success anonymous function scope

Sean Vieira
fonte
12
Eu sempre me perguntei como isso foi feito, já que o JavaScript não é encadeado.
Matt
4
@ L.DeLeo - não, de maneira alguma - adiados são outra maneira de gerenciar a complexidade de chamadas de funções assíncronas - async: false remove completamente a assincronicidade da chamada . A chamada para ajax blocos - o código a seguir não é executado até que o servidor responda.
Sean Vieira
14
Lembre-se de que isso também significa que o navegador não capturará / disparará nenhum evento que esteja acontecendo enquanto o ajax estiver sendo executado. Descobri isso da maneira mais difícil, tentando descobrir por que o Firefox não estava acionando um evento de clique. Acabou sendo devido a um evento de desfoque "forçado" com uma seguinte chamada de sincronização bloqueando-o.
PålOliver
3
@ Matt não, não é (mais ^^) w3schools.com/html/html5_webworkers.asp
borrel
5
Parece async: falseestá morto, eu tentei e consegui18: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 pausado . (Outro código aguardando o término.)
  • async:true= Código continuado . (Nada é pausado. Outro código não está aguardando .)

Tão simples como isso.

夏 期 劇場
fonte
Bastante genérico "restante do código", explica o escopo do código em pausa.
Bart
26

Async:Falsemanterá a execução do código restante. Depois de obter a resposta do ajax, somente então, o restante do código será executado.

Mohit
fonte
18

Se você desativar a recuperação assíncrona, seu script será bloqueado até que a solicitação seja atendida. É útil para executar alguma sequência de solicitações em uma ordem conhecida, embora eu ache os retornos de chamada assíncronos mais limpos.

John Millikin
fonte
Joe: isso dependeria de você ter algum thread de trabalho em segundo plano.
John Millikin
10

Um caso de uso é fazer uma ajaxchamada antes que o usuário feche a janela ou saia da página. Seria como excluir alguns registros temporários no banco de dados antes que o usuário possa navegar para outro site ou fechar o navegador.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Tony
fonte
51
Nenhuma quantidade de JavaScript vai parar de uma janela do navegador de fechar
jammykam
Eu precisava de assíncrono falso para algo completamente não relacionado, mas ele resolveu o meu problema, pois permitia que o meu script capturasse um valor de um arquivo xml antes de preenchê-lo na página como indefinido.
J_L 11/10/19
8

De

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

O XMLHttpRequest síncrono fora dos trabalhadores está sendo removido da plataforma da Web, pois tem efeitos negativos para a experiência do usuário final. (Esse é um processo longo que leva muitos anos.) Os desenvolvedores não devem passar falso para o argumento assíncrono quando o ambiente global JavaScript é um ambiente de documento. Os agentes do usuário são fortemente encorajados a avisar sobre esse uso nas ferramentas do desenvolvedor e podem experimentar lançar uma exceção InvalidAccessError quando ela ocorrer. A direção futura é permitir apenas XMLHttpRequests nos threads de trabalho. A mensagem pretende ser um aviso para esse efeito.

i474232898
fonte
8

Definir async como false significa que as instruções após a solicitação ajax terão que aguardar a conclusão da solicitação. Abaixo está um caso em que é necessário definir async para false, para que o código funcione corretamente.

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

O exemplo acima explica claramente o uso de async: false

Ao defini-lo como false, garantimos que, depois que os dados forem recuperados do URL , somente depois retornemos php_data; é chamado

Harsh Gupta
fonte
Apenas no caso de alguém ter o mesmo problema que eu: Esta resposta destaca que a return php_datadeclaração não pode estar na função de sucesso, mas deve estar fora da $.ajax()função. Eu tinha colocado o meu equivalente do return php_datainterior do success: function(){}e foi sempre retornando indefinido
gordon613
0

use esta opção decimais: 3

aqui está o 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