jQuery.ajax（）で「async：false」は何をしますか？

256

具体的には、デフォルト（async: true）とどう違うのですか？

どのような状況では、私は明示的に設定したいだろうasyncしfalse、それは発射からページ上の他のイベントを防止することとは何かを持っているのでしょうか？

jquery

— ジョーD
ソース

この質問のようになります。http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-reqは、コールの同期を行います。 ...

— CSharpAtl

ええ、私にはそれが非同期でなければ「Ajax」（非同期JavaScriptとXML）以外のものと呼ばれるべきだと

— 思い

非同期とは、スクリプトがサーバーにリクエストを送信し、応答を待たずに実行を継続することを意味します。応答が受信されるとすぐに、ブラウザイベントが発生します。これにより、スクリプトは関連するアクションを実行できます。

— SagarPPanchal 2014

300

ページ上の他のイベントが発生するのを防ぐことと関係がありますか？

はい。

asyncをfalseに設定すると、関数の次のステートメントを呼び出す前に、呼び出しているステートメントが完了する必要があります。async：trueを設定すると、そのステートメントが実行を開始し、asyncステートメントがまだ完了しているかどうかに関係なく、次のステートメントが呼び出されます。

詳細については、jQuery ajax成功の匿名関数スコープを参照してください。

— ショーン・ビエイラ
ソース

12

JavaScriptはスレッド化されていないので、これがどのようにして実現されたのか、いつも疑問に思っていました。

— マット

4

@ L.DeLeo-いいえ、まったくありません-遅延は、非同期関数呼び出しの複雑さを管理するもう1つの方法でありasync: false 、呼び出しから非同期性を完全に削除します。ajax ブロックの呼び出し-それに続くコードは、サーバーが応答するまで実行されません。

— Sean Vieira

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

非同期取得を無効にすると、スクリプトはリクエストが満たされるまでブロックされます。非同期コールバックの方がわかりやすいと思いますが、既知の順序で一連のリクエストを実行するのに役立ちます。

— ジョン・ミリキン
ソース

Joe：バックグラウンドにワーカースレッドがあるかどうかによって異なります。

— John Millikin

10

1つの使用例は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が必要でしたが、ページ上でundefinedとして設定する前にスクリプトがxmlファイルから値を取得できるため、問題は解決しました。

— J_L 2019年

8

から

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

ワーカーの外部の同期XMLHttpRequestは、エンドユーザーのエクスペリエンスに悪影響を与えるため、Webプラットフォームから削除される過程にあります。（これは何年もかかる長いプロセスです。）JavaScriptグローバル環境がドキュメント環境である場合、開発者はasync引数にfalseを渡してはいけません。ユーザーエージェントは、開発者ツールでのこのような使用について警告することを強くお勧めします。また、発生したときにInvalidAccessError例外をスローして実験する場合があります。将来の方向性は、ワーカースレッドでのみXMLHttpRequestsを許可することです。メッセージは、その影響に対する警告を目的としています。

— i474232898
ソース

8

asyncをfalseに設定すると、ajaxリクエストに続く命令は、リクエストが完了するまで待機する必要があります。以下は、コードを正しく機能させるために、非同期をfalseに設定する必要がある1つのケースです。

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(){}常にundefinedを返していました

— 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>

— サミル・ラカニ
ソース