web-dev-qa-db-ja.com

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

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

success関数がうまく機能することもあれば、うまくいかないこともあります。

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

問題は、Ajaxリクエストが終了するまでブロックをフリーズすることです。サーバーが少しの間ダウンしても、それは決して終わりません。

javascriptjqueryhtmlcssajax
169
James

$.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"です。

285
Intelekshual

これが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パラメータ（またはjqXHR.statusText）を使用すると、エラーが何であったかを知ってください。失敗がタイムアウトによって引き起こされたことを知りたいなら、これは役に立つかもしれません。

error（jqXHR、textStatus、errorThrown）

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

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

104
Brandon Boone

あなたはこのようなajaxオプションでtimeout設定を使うことができます：

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

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

タイムアウトが発生すると、errorハンドラではなくsuccessハンドラがトリガされることを覚えておいてください:)

22
Martin Jespersen

フル機能の.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);
        }
    }
});​
2
Rudolf Mühlbauer