Что делает «async: false» в jQuery.ajax ()?

256

В частности, чем он отличается от default ( async: true)?

При каких обстоятельствах я хотел бы явно установить asyncзначение false, и имеет ли это какое-то отношение к предотвращению запуска других событий на странице?

jquery Джо Д
источник
похоже на этот вопрос: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req делает вызов синхронным. ...
CSharpAtl
Да, мне кажется, это должно называться как-нибудь иначе, чем "Ajax" (асинхронный JavaScript и XML), если он не асинхронный ...
devlord
Асинхронный означает, что скрипт отправит запрос на сервер и продолжит выполнение, не дожидаясь ответа. Как только ответ получен, запускается событие браузера, что, в свою очередь, позволяет сценарию выполнять связанные действия.
СагарПанчал

Ответы:

300

Это как-то связано с предотвращением запуска других событий на странице?

Да.

Установка async в false означает, что оператор, который вы вызываете, должен завершиться до того, как будет вызван следующий оператор в вашей функции. Если вы установите async: true, то этот оператор начнет свое выполнение, и следующий оператор будет вызван независимо от того, завершился ли еще оператор async.

Для получения дополнительной информации см .: JQuery AJAX Успех анонимная функция Область

Шон Виейра
источник
12
Мне всегда было интересно, как это было достигнуто, поскольку JavaScript не является многопоточным.
Мэтт
4
@ L.DeLeo - нет, совсем нет - отсрочки - еще один способ управления сложностью вызовов асинхронных функций - полностью async: false устраняет асинхронность вызова . Вызов ajax блоков - код, который следует за ним, не выполняется до тех пор, пока сервер не ответит.
Шон Виейра
14
Помните, что это также означает, что браузер не будет захватывать / запускать какие-либо события, происходящие во время выполнения ajax. Я нашел это трудным путем, пытаясь выяснить, почему Firefox не вызывал событие щелчка. Оказалось, что это произошло из-за «вынужденного» размытия с последующим вызовом синхронизации, блокирующим его.
PålOliver
3
Не нет , это @ Matt нет (больше ^^) w3schools.com/html/html5_webworkers.asp
Боррел
5
Кажется async: false, мертв, я попробовал и получил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
Аба
120
  • async:false= Код приостановлен . (Другой код, ожидающий завершения.)
  • async:true= Код продолжается . (Ничто не останавливается. Другой код не ждет .)

Так просто, как это.

夏 期 劇場
источник
Довольно общий «остаток кода», объясните сферу приостановленного кода.
Барт
26

Async:Falseпроведет выполнение кода покоя. Как только вы получите ответ ajax, только тогда будет выполняться остальная часть кода.

Мохит
источник
18

Если вы отключите асинхронный поиск, ваш скрипт будет блокироваться, пока запрос не будет выполнен. Это полезно для выполнения некоторой последовательности запросов в известном порядке, хотя я считаю, что асинхронные обратные вызовы более понятны.

Джон Милликин
источник
Джо: это будет зависеть от того, есть ли у вас рабочие потоки в фоновом режиме.
Джон Милликин
10

Одним из вариантов использования является ajaxвызов до того, как пользователь закроет окно или покинет страницу. Это похоже на удаление некоторых временных записей в базе данных, прежде чем пользователь сможет перейти на другой сайт или закрыть браузер.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
Тони
источник
51
Никакое количество JavaScript не остановит окно браузера
jammykam
Мне нужно было async false для чего-то совершенно не связанного, но это решило мою проблему, так как позволило моему сценарию получить значение из файла XML, прежде чем заполнить его на странице как неопределенное.
J_L
8

Из

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

Синхронный запрос XMLHttpRequest за пределами рабочих находится в процессе удаления с веб-платформы, поскольку он оказывает пагубное влияние на работу конечного пользователя. (Это долгий процесс, который занимает много лет.) Разработчики не должны передавать false для асинхронного аргумента, когда глобальная среда JavaScript является средой документов. Пользовательским агентам настоятельно рекомендуется предупреждать о таком использовании в инструментах разработчика и могут поэкспериментировать с генерацией исключения InvalidAccessError при его возникновении. Будущее направление - разрешить XMLHttpRequests только в рабочих потоках. Сообщение предназначено для предупреждения об этом.

i474232898
источник
8

Установка async в false означает, что инструкции, следующие за ajax-запросом, должны будут ждать его завершения. Ниже приведен один случай, когда нужно установить async в false, чтобы код работал правильно.

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

Приведенный выше пример ясно объясняет использование async: false

Установив для него значение false, мы убедились, что как только данные извлекаются из URL , только после этого возвращаются php_data; называется

Суровая Гупта
источник
На всякий случай, если у кого-то еще есть такая же проблема, как у меня: этот ответ подчеркивает, что return php_dataутверждение не может быть в функции успеха, но должно быть вне $.ajax()функции. Я положил свой эквивалент return php_dataизнутри, success: function(){}и он всегда возвращался неопределенным
gordon613
0

используйте эту опцию десятичных дробей: 3

Вот 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>
Самир Лахани
источник