13

次のコードの実行順序が線形であると仮定して、コードのデバッグに3時間費やしたところ、それが原因であることがわかりました。-

$.ajax( {ajax options} );
console.log('I was assuming this would execute once the ajax request was complete');

これが私に問題を引き起こしたのはこれが初めてではなく、私はこの行動の理由が何であるか疑問に思っていましたか？

ajaxリクエストが、ajaxリクエストとは関係のない他のスクリプトの実行を妨げないようにするためですか？

4

9 に答える 9

12

他の答えのほとんどは、これに対処する方法に答えています。この場合、なぜ非同期が優れているのかを簡単に見ていきたいと思います。

実際、ほとんどのブラウザー内Javascriptは非同期です。たとえば、次のコードを考えてみましょう。

document.getElementById('foo').onclick = function() {
    alert('foo clicked');
};
document.getElementById('bar').onclick = function() {
    alert('bar clicked');
};

どちらが最初に実行されますか？ブラウザモデル（または実際にはほとんどのイベント駆動型コード）に固有の非同期性のため、わかりません。イベントが発生したときにコードを実行します。ドキュメントを設定し、イベントが発生するのを待つと、最初に発生するイベントに応じて、コードをさまざまな順序で実行できます。Javascriptコードは、最初に作成されたときだけでなく、ページの存続期間全体にわたって実行する必要があります。

したがって、一般的に、 Javascriptプログラミング（または少なくとも、最も単純なレベルを超えるJavascriptプログラミング）は非同期になることがよくあります。さらに、HTTPリクエストを非同期にすることも非常に理にかなっています。

まず、質問で示唆しているように、コードを同期させると実行がブロックされます。つまり、HTTPリクエストを2行上に作成しているため、アニメーションの開始を2秒待たせたくない場合があります。サーバーの応答時間は（a）不規則で、（b）遅い可能性があるため、アプリケーションの設計がサーバーの応答速度に依存することは意味がありません。

次に、さらに重要なことに、スクリプトがAJAX呼び出しを行っているために、ユーザーがページの使用を停止することはありません。ユーザーは気にしません。スクリプトが現在無関係のAJAXリクエストに関連付けられているため、ユーザーはおそらく通常のonscroll動作が機能していないことに気付くでしょう。ブラウザのJavascriptプログラミング全体の非同期性と連携するには、HTTP呼び出しの大部分が非ブロッキングで非同期である必要があります。

于 2012-06-07T13:19:31.467 に答える
10

ajaxは非同期であるためです。ajax呼び出しの成功で何かを実行したい場合は、成功イベントを使用します

$.ajax({
  url: 'yourserverpage.php',
  success: function(data) {

    alert('This will be executed only when ajax call is success /finished');
  }
});

非同期とは？

非同期I/O、またはノンブロッキングI / Oは、送信が終了する前に他の処理を続行できるようにする入出力処理の形式です。非同期I / Oは、スループット、遅延、および/または応答性を向上させるために使用されます。

于 2012-06-07T13:01:50.850 に答える
2

jQuery$.ajax()には、beforeSend、success、error、completeの4つの（イベント）オプションが用意されています。あなたの場合、完全が正しい答えだと思います。

例えば

$.ajax({
  url: someUrl,
  //...
  beforeSend: function(){
    console.log("I'm sending AJAX.");
    //display loading?
  },
  success: function(data){
    console.log('response: '+data);
  },
  error: function(er){
    console.log(er.responseText);
  },
  complete: function(){
    console.log("I'm done.");
    //hide loading?
  }
});
于 2013-05-16T08:17:10.920 に答える
1

あなたは成功することができますまたはあなたはまた使うかもしれません.done();

$.ajax( {ajax options} ).done(console.log('I was assuming this would execute once the ajax request was complete'));
于 2012-06-07T13:04:01.517 に答える
1

success:AJAX完了を保持するには、次のようにコードを関数内に配置する必要があります。

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    // Do something after AJAX is completed.
    console.log('I was assuming this would execute once the ajax request was complete');
  }
});
于 2012-06-07T13:01:27.087 に答える
0

$.ajaxは非同期関数であるため、要求が完了するのを待たずに戻ります。代わりに、リクエストが終了すると、コールバック関数が呼び出されます。指定者は、successおよび/またはで指定しますerror。

同期動作が本当に必要な場合は、オプションasyncをfalseに設定できます。（docuを参照）。ただし、その場合は、リクエストが完了するまでUI全体がフリーズすることに注意してください。

于 2012-06-07T13:01:31.150 に答える
0

他の人が言っているように、ajaxはAsynchronousJavascriptとXmlの略です。そうは言っても、 jquerysajax関数を使用して次のいずれかを実行できます。

  1. 呼び出しを同期させたい場合は、「async」オプションをfalseに設定します。これはデフォルトで当てはまります。ドキュメントを参照してください。jQuery 1.8以降、このプロパティの使用は非推奨になりました。

  2. 「完全な」コールバックを提供します。これはデフォルトで非同期的に発生します。これは：

    リクエストが終了したときに呼び出される関数（成功およびエラーのコールバックが実行された後）。

  3. 「成功」コールバックを提供します。これはデフォルトで非同期的に発生します。これは：

    リクエストが成功した場合に呼び出される関数。

于 2012-06-07T13:12:20.970 に答える
0

AJAXの最初のAは非同期を表します。つまり、AJAX呼び出しはバックグラウンドで実行され、終了するまでスクリプトの実行を保留しません。これはほとんど仕様によるものです。

呼び出しが終了したときにコードを実行する場合は、次の1つ以上のパラメーターで関数を渡すことができます。

$.ajax({
  // your other options

  done: function(data, textStatus, jqXHR) {
    alert('Success! I got the following data back: ' + data);
    // this runs when the request has finished successfully
  },

  fail: function(jqXHR, textStatus, errorThrown) {
    alert('Oops, there was an error :(');
    // this runs when the request has finished, but with an error
  },

  always: function(jqXHR, textStatus) {
    alert("OK, I'm done.");
    // this runs when the call is finished, regardless
    // of whether it has succeeded or not
  }

詳細については、APIを確認してください：http：//api.jquery.com/jQuery.ajax

于 2012-06-07T13:16:12.307 に答える
0

別のオプションは、単に非同期をfalseに設定することです

$.ajax({
  async : 'false',
  other options
});

このようにして、$。ajaxステートメントが終了するまで次のステートメントは実行されません。

于 2015-02-17T11:21:37.153 に答える