Imposta timeout per ajax (jQuery)

Question

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

A volte la funzione success funziona correttamente, a volte no.

Come si imposta il timeout per questa richiesta Ajax? Ad esempio, 3 secondi, se il tempo è scaduto, quindi mostrare un errore.

Il problema è che la richiesta di ajax blocca il blocco fino al termine. Se il server è inattivo per un po 'di tempo, non finirà mai.

Answer 1

Leggere lo $.ajaxdocumentation, questo è un argomento coperto.

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

È possibile ottenere vedere che tipo di errore è stato gettato accedendo al parametro textStatus dell'opzione error: function(jqXHR, textStatus, errorThrown). Le opzioni sono "timeout", "error", "abort" e "parsererror".

Answer 2

Ecco alcuni esempi che dimostrano l'impostazione e il rilevamento dei timeout nei vecchi e nuovi paradigmi di jQuery.

Live Demo

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

Si noti che il textStatus param (o jqXHR.statusText) ti consente di sapere che cosa l'errore è stato. Questo può essere utile se vuoi sapere che l'errore è stato causato da un timeout.

errore (jqXHR, textStatus, errorThrown)

Una funzione di essere chiamato se la richiesta fallisce. La funzione riceve tre argomenti: Il jqXHR (nell'oggetto jQuery 1.4.x, XMLHttpRequest), una stringa che descrive il tipo di errore che si è verificato e un oggetto di eccezione facoltativo, se si è verificato. I possibili valori per il secondo argomento (oltre a null) sono "timeout", "error", "abort" e "parsererror". Quando si verifica un errore HTTP, errorThrown riceve la parte testuale dello stato HTTP, ad esempio "Not Found" o "Internal Server Error". A partire da jQuery 1.5, l'impostazione dell'errore può accettare una serie di funzioni. Ogni funzione sarà chiamata a turno . Nota: questo gestore non viene chiamato per lo script tra domini e le richieste JSONP .

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

Answer 3

è possibile utilizzare l'impostazione timeout nelle opzioni Ajax come questo:

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

Leggi tutto sui opzioni Ajax qui: http://api.jquery.com/jQuery.ajax/

Ricordate che quando un si verifica il timeout, viene attivato il gestore error e non il gestore success :)

Answer 4

utilizzare la funzione jQuery completa di .ajax. confrontare con https://stackoverflow.com/a/3543713/1689451 per un esempio.

senza prove, basta la fusione il codice con il SO domanda si fa riferimento:

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