ajax（jQuery）のタイムアウトを設定する

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

時にはsuccess機能は時々 、良いではない動作します。

このajaxリクエストのタイムアウトを設定するにはどうすればよいですか？たとえば、3秒でタイムアウトになった場合、エラーが表示されます。

問題は、ajaxリクエストが完了するまでブロックを凍結することです。サーバーが少しの間停止している場合、それは決して終わりません。

$.ajax ドキュメントを読んでください。これは対象トピックです。

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

error: function(jqXHR, textStatus, errorThrown)オプションのtextStatusパラメータにアクセスすると、どのタイプのエラーがスローされたかを確認できます。オプションは、「timeout」、「error」、「abort」、および「parsererror」です。

jQueryの新旧のパラダイムでのタイムアウトの設定と検出を示すいくつかの例を次に示します。

Live Demo

jQuery 1.8以降での約束

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8以降

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

textStatus param（またはjqXHR.statusText）がエラーの内容を通知することに注意してください。これは、タイムアウトが原因で障害が発生したことを知りたい場合に役立ちます。

エラー（jqXHR、textStatus、errorThrown）

リクエストが失敗した場合に呼び出される関数。関数は3つの引数を受け取ります。jqXHR（jQuery 1.4.xではXMLHttpRequest）オブジェクト、発生したエラーのタイプを説明する文字列、およびオプションの例外オブジェクト（発生した場合）。2番目の引数（null以外）の可能な値は、「timeout」、「error」、「abort」、および「parsererror」です。HTTPエラーが発生すると、errorThrownは「Not Found」や「Internal Server Error」などのHTTPステータスのテキスト部分を受け取ります。jQuery 1.5以降、エラー設定は関数の配列を受け入れることができます。各関数が順番に呼び出されます。注：このハンドラーは、クロスドメインスクリプトおよびJSONPリクエストでは呼び出されません。

src：http : //api.jquery.com/jQuery.ajax/

次のtimeoutようなajaxオプションの設定を使用できます。

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

ここでajaxオプションについてすべてお読みください：http : //api.jquery.com/jQuery.ajax/

タイムアウトが発生すると、errorハンドラーではなくハンドラーがトリガーされることにsuccess注意してください。

フル.ajax機能のjQuery関数を使用します。例としてhttps://stackoverflow.com/a/3543713/1689451と比較してください。

テストせずに、参照されているSO質問とコードをマージするだけです。

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​