Ajax için zaman aşımını ayarlama (jQuery)

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

Bazen successfonksiyon iyi çalışıyor, bazen de çalışmıyor.

Bu ajax isteği için zaman aşımını nasıl ayarlarım? Örneğin, 3 saniye, süre dolmuşsa, bir hata gösterin.

Sorun, ajax isteğinin bitene kadar bloğu dondurmasıdır. Sunucu kısa bir süre kapalı kalırsa, hiçbir zaman sona ermeyecektir.

Lütfen $.ajax belgeleri okuyun , bu konu ele alınmıştır.

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

Seçeneğin textStatus parametresine erişerek ne tür bir hata atıldığını görebilirsiniz error: function(jqXHR, textStatus, errorThrown). Seçenekler "zaman aşımı", "hata", "iptal" ve "ayrıştırıcı" dır.

Aşağıda, jQuery'nin eski ve yeni paradigmalarındaki zaman aşımlarını ayarlamayı ve algılamayı gösteren bazı örnekler verilmiştir.

Live Demo

JQuery 1.8+ ile söz verin

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
});

O Bildirimi textStatus param (veya jqXHR.statusText ) Hata neydi bildireceğiz. Hatanın bir zaman aşımından kaynaklandığını bilmek istiyorsanız bu yararlı olabilir.

hatası (jqXHR, textStatus, errorThrown)

İstek başarısız olursa çağrılacak bir işlev. İşlev üç bağımsız değişken alır: jqXHR (jQuery 1.4.x, XMLHttpRequest) nesnesi, oluşan hata türünü açıklayan bir dize ve varsa isteğe bağlı bir istisna nesnesi. İkinci bağımsız değişken için olası değerler (null dışında) "timeout", "error", "abort" ve "parsererror" dur. Bir HTTP hatası oluştuğunda errorThrown, HTTP durumunun "Bulunamadı" veya "Dahili Sunucu Hatası" gibi metinsel kısmını alır. JQuery 1.5 itibariyle, hata ayarı bir dizi işlevi kabul edebilir. Her fonksiyon sırayla çağrılır. Not: Bu işleyici, etki alanları arası komut dosyası ve JSONP istekleri için çağrılmaz.

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

Sen kullanabilirsiniz timeoutböyle ajax seçeneklerinde ayarı:

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

Ajax seçenekleri hakkında her şeyi buradan okuyun: http://api.jquery.com/jQuery.ajax/

Bir zaman aşımı oluştuğunda, errorişleyicinin değil, successişleyicinin tetiklendiğini unutmayın :)

tam özellikli .ajaxjQuery işlevini kullanın. bir örnek için https://stackoverflow.com/a/3543713/1689451 ile karşılaştırın .

test etmeden, kodunuzu başvurulan SO sorusuyla birleştirmeniz yeterlidir:

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);
        }
    }
});​