javascript - ajaxリクエストの時間

Question

jquery ajaxリクエストがどのくらいの期間続いているかを計る方法はありますか？検索に時間がかかりすぎる場合があります。検索に5秒かかる場合は、jqueryのabort（）ボタンを追加すると便利です。とにかく私はこれを行うことができます！

ajaxリクエストのもう一方の端には、postgresqlリクエストを作成するphpファイルがあります。

アイデアをありがとう！

Answer 1

タイムアウトオプション（http://api.jquery.com/jQuery.ajax/）を見てください。特定の呼び出しで設定することも、$。ajaxSetup（）を使用してグローバルに設定することもできます。

Answer 2

setTimeout5秒後に中止ボタンを表示するには、の呼び出し後に関数を追加しますsend。AJAXコマンドが完了したら、タイムアウトをクリアし、存在する場合は中止ボタンを削除するコードを追加できます。

var timeOutID = 0;
$.ajax({
  url: 'ajax/test.html',
  success: function(data) {     
    clearTimeOut(timeOutID);
    // Remove the abort button if it exists.
  }
});
timeOutID = setTimeout(function() {
                 // Add the abort button here.
               }, 5000);   

このように、AJAXが十分に速く戻った場合、中止ボタンは表示されません。

Answer 3

通常、リクエストが送信されるとタイムアウトを設定します。これは10秒ほど後にトリガーされ、それがまだ発生することを確認するために他の何かにフォールバックします（たとえば、フォームの送信）。

したがって、変数をfalseに設定 var failed = false;し、リクエストを実行します。リクエストの開始と同時に、タイムアウトを設定します。

setTimeout(function() {
    failed = true;
    $("#form").submit();
    return false;
}, 10000);

ajax呼び出しのreturn関数で、失敗した変数がtrueに設定されているかどうかを確認します。設定されている場合は、最初に試行していたことを実際に実行しないでください。そうしないと、何かが混乱したり、ユーザーが混乱したりする可能性があります。他の何かが起こっています（これらのことは通常遅いインターネット接続で起こるので、新しいページがロードされている間に次のステップが表示された場合、彼らは相互作用しようとし、その後ページが変更されます）。

$.post("ajaxcall.php", {'etc': "etc"},
    function(returned) {
        if (failed != true) {
            //do whatever with returned variable
        }
});

Answer 4

var timer = 0,
    XHR = $.ajax({
             url: 'ajax/mypage.html',
             beforeSend: function() {
                 timer=setTimeout(showAbort, 5000);
             }
          });

function showAbort() {
    $('<input type="button" value="Abort" id="abort_button"/>').appendTo('#some_parent');
    $('#abort_button').on('click', function() {
         XHR.abort(); //abort the Ajax call
    });
}

XHR.always(function() {  //fires on both fail and done
    clearTimeout(timer);
    if ($('#abort_button').length) {
       $('#abort_button').remove(); //remove button if exists
    }
});