Що означає "async: false" у jQuery.ajax ()?

256

Зокрема, чим він відрізняється від типового ( 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

Асинхронний означає, що сценарій відправить запит на сервер і продовжить його виконання, не чекаючи відповіді. Як тільки відповідь отримана, подія браузера запускається, що в свою чергу дозволяє сценарію виконувати пов'язані дії.

— SagarPPanchal

300

Чи має це щось спільне з тим, щоб запобігти стрільбі інших подій на сторінці?

Так.

Якщо встановити асинхронізацію на хибну, це означає, що оператор, який ви телефонуєте, повинен завершитись, перш ніж можна буде викликати наступне твердження у вашій функції. Якщо ви встановите 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

— borrel

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

Якщо ви вимкнете асинхронний пошук, ваш сценарій буде заблокований, поки запит не буде виконано. Це корисно для виконання певної послідовності запитів у відомому порядку, хоча я вважаю, що зворотні виклики async є більш чистими.

— Джон Мілікін
джерело

Джо: це залежатиме від того, чи є у вас якісь робочі нитки на задньому плані.

— Джон Міллікін

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 за межами працівників зараз видаляється з веб-платформи, оскільки це згубно впливає на досвід кінцевого користувача. (Це довгий процес, який займає багато років.) Розробники не повинні передавати помилки для аргументу асинхронізації, коли глобальне середовище JavaScript є середовищем документа. Користувачам-агентам настійно рекомендується попередити про таке використання в інструментах для розробників, і вони можуть експериментувати з викиданням виключення InvalidAccessError, коли воно відбувається. Майбутній напрям - дозволити XMLHttpRequests лише у робочих потоках. Повідомлення призначене для попередження про це.

— i474232898
джерело

8

Встановлення функції асинхронізації неправдивою означає, що інструкціям після запиту ajax доведеться дочекатися завершення запиту. Нижче наводиться один випадок, коли асинхронізацію потрібно встановити на 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>

— Самір Лахані
джерело