Ustaw limit czasu dla ajax (jQuery)

Question

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

Czasami funkcja success działa dobrze, czasami nie.

Jak ustawić limit czasu dla tego żądania ajax? Na przykład 3 sekundy, jeśli czas się skończył, oznacza to błąd.

Problem polega na tym, że żądanie ajax blokuje blok aż do zakończenia. Jeśli serwer nie działa przez jakiś czas, nigdy się nie skończy.

Answer 1

Proszę przeczytać $.ajaxdocumentation, jest to temat objęty.

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

Można dostać zobaczyć, jaki rodzaj błędu został wyrzucony przez uzyskanie dostępu do parametru textStatus opcji error: function(jqXHR, textStatus, errorThrown). Dostępne opcje to "timeout", "error", "abort" i "parsererror".

Answer 2

Oto kilka przykładów demonstrujących ustawienie i wykrywanie przekroczeń limitu czasu w starych i nowych paradygmatach jQuery.

Live Demo

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

Zauważ, że textStatus param (lub jqXHR.statusText) pozwoli Ci wiedzieć, co było błędem. Może to być przydatne, jeśli chcesz wiedzieć, że błąd spowodowany był przekroczeniem limitu czasu.

błąd (jqXHR, textStatus, errorThrown)

Funkcja nazywać jeżeli żądanie zawiedzie. Funkcja otrzymuje trzy argumenty: Obiekt jqXHR (w jQuery 1.4.x, XMLHttpRequest), ciąg znaków opisujący typ błędu , który wystąpił, oraz opcjonalny obiekt wyjątku, jeśli wystąpił. Możliwe wartości drugiego argumentu (oprócz wartości null) to "timeout", "error", "abort" i "parsererror". Gdy wystąpi błąd HTTP, errorThrown otrzymuje tekstową część statusu HTTP, na przykład "Not Found" lub "Internal Server Error." Od wersji jQuery 1.5 ustawienie błędu może akceptować szereg funkcji. Każda funkcja będzie się nazywać po kolei . Uwaga: Ten moduł obsługi nie jest wywoływany w przypadku skryptów międzydomenowych i żądań JSONP .

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

Answer 3

Można użyć ustawienia timeout w Ajax opcji, takich jak ten:

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

przeczytać o Ajax opcji tutaj: http://api.jquery.com/jQuery.ajax/

Pamiętaj, że kiedy timeout występuje, wyzwalacz error jest wyzwalany, a nie obsługujący success :)

Answer 4

używać w pełni funkcjonalną funkcję jQuery. na przykład z przykładem https://stackoverflow.com/a/3543713/1689451.

bez badań, po prostu łączenie kodu z odnośną SO pytanie:

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