Que fait «async: false» dans jQuery.ajax ()?

256

Plus précisément, en quoi diffère-t-il de la valeur par défaut ( async: true)?

Dans quelles circonstances je veux ensemble explicite asyncà false, et at - il quelque chose à voir avec la prévention d' autres événements sur la page de mise à feu?

jquery Joe D
la source
ressemble à cette question: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req rend l'appel synchrone. ...
CSharpAtl
Ouais, il me semble qu'on devrait l'appeler autre chose que "Ajax" (JavaScript Asynchrone Et XML) si ce n'est pas asynchrone ...
devlord
Asynchrone signifie que le script enverra une demande au serveur et poursuivra son exécution sans attendre la réponse. Dès que la réponse est reçue, un événement de navigateur est déclenché, ce qui permet au script d'exécuter les actions associées.
SagarPPanchal

Réponses:

300

Cela a-t-il quelque chose à voir avec le fait d'empêcher d'autres événements sur la page de se déclencher?

Oui.

Définir async sur false signifie que l'instruction que vous appelez doit se terminer avant que l'instruction suivante dans votre fonction puisse être appelée. Si vous définissez async: true, cette instruction commencera son exécution et l'instruction suivante sera appelée, que l'instruction async soit terminée ou non.

Pour plus d'informations, voir: jQuery ajax success anonymous function scope

Sean Vieira
la source
12
Je me suis toujours demandé comment cela a été accompli, car JavaScript n'est pas enfilé.
Matt
4
@ L.DeLeo - non, pas du tout - les différés sont une autre façon de gérer la complexité des appels de fonction asynchrones - async: false supprime complètement l'asynchronisme de l'appel . L'appel aux ajax blocs - le code qui le suit n'est pas exécuté tant que le serveur n'a pas répondu.
Sean Vieira
14
N'oubliez pas que cela signifie également que le navigateur ne capturera / ne déclenchera aucun événement se produisant pendant l'exécution d'Ajax. J'ai découvert cela à la dure, en essayant de comprendre pourquoi Firefox ne déclenchait pas un événement de clic. Il s'est avéré être dû à un événement de flou "forcé" avec un appel de synchronisation suivant le bloquant.
PålOliver
3
@Matt no it is not ( longer
borrel
5
Il semble qu'il async: falsesoit mort, je l'ai essayé et j'ai obtenu18: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 en pause . (Autre code attendant que cela se termine.)
  • async:true= Le code a continué . (Rien n'est mis en pause. Un autre code n'attend pas .)

Aussi simple que cela.

夏 期 劇場
la source
"Reste de code" assez générique, explique la portée du code en pause.
Bart
26

Async:Falsetiendra l'exécution du code de repos. Une fois que vous obtenez la réponse de ajax, alors seulement, le reste du code s'exécutera.

Mohit
la source
18

Si vous désactivez la récupération asynchrone, votre script se bloquera jusqu'à ce que la demande soit satisfaite. Il est utile pour effectuer une séquence de requêtes dans un ordre connu, bien que je trouve les rappels asynchrones plus propres.

John Millikin
la source
Joe: cela dépendrait si vous avez des threads de travail en arrière-plan.
John Millikin,
10

Un cas d'utilisation consiste à passer un ajaxappel avant que l'utilisateur ne ferme la fenêtre ou quitte la page. Cela reviendrait à supprimer certains enregistrements temporaires dans la base de données avant que l'utilisateur puisse naviguer vers un autre site ou fermer le navigateur.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Tony
la source
51
Aucune quantité de JavaScript n'arrêtera la fermeture d'une fenêtre de navigateur
jammykam
J'avais besoin d'async false pour quelque chose de complètement indépendant, mais cela a résolu mon problème car il a permis à mon script de récupérer une valeur d'un fichier xml avant de la remplir sur la page comme non définie.
J_L
8

De

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

Synchronous XMLHttpRequest en dehors des travailleurs est en cours de suppression de la plate-forme Web car cela a des effets néfastes sur l'expérience de l'utilisateur final. (Il s'agit d'un long processus qui prend de nombreuses années.) Les développeurs ne doivent pas passer false pour l'argument asynchrone lorsque l'environnement global JavaScript est un environnement de document. Les agents utilisateurs sont fortement encouragés à avertir d'une telle utilisation dans les outils de développement et peuvent expérimenter le lancement d'une exception InvalidAccessError lorsqu'elle se produit. La direction future est d'autoriser uniquement XMLHttpRequests dans les threads de travail. Le message est destiné à être un avertissement à cet effet.

i474232898
la source
8

Définir async sur false signifie que les instructions qui suivent la demande ajax devront attendre que la demande se termine. Voici un cas où il faut définir async sur false, pour que le code fonctionne correctement.

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'exemple ci-dessus explique clairement l'utilisation de async: false

En le définissant sur false, nous nous sommes assurés qu'une fois les données récupérées de l' url , seulement après ce retour php_data; est appelé

Harsh Gupta
la source
Juste au cas où quelqu'un d'autre aurait le même problème que moi: cette réponse souligne que l' return php_datainstruction ne peut pas être dans la fonction de réussite, mais doit être en dehors de la $.ajax()fonction. J'avais mis mon équivalent de l' return php_dataintérieur success: function(){}et il revenait toujours indéfini
gordon613
0

utiliser cette option décimales: 3

voici 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
la source