Imposta timeout per ajax (jQuery)

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

A volte la successfunzione funziona bene, a volte no.

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

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

Si prega di leggere la $.ajax documentazione , questo è un argomento trattato.

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

Puoi vedere quale tipo di errore è stato generato accedendo al parametro textStatus error: function(jqXHR, textStatus, errorThrown)dell'opzione. Le opzioni sono "timeout", "errore", "abort" e "parsererror".

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

Live Demo

Promettilo 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 parametro textStatus (o jqXHR.statusText ) ti farà sapere qual è stato l'errore. Ciò può essere utile se si desidera sapere che l'errore è stato causato da un timeout.

errore (jqXHR, textStatus, errorThrown)

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

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

È possibile utilizzare l' timeoutimpostazione nelle opzioni ajax in questo modo:

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

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

Ricordare che quando si verifica un timeout, il errorgestore viene attivato e non ilsuccess gestore gestore :)

utilizzare la .ajaxfunzione jQuery con funzionalità complete . confrontare con https://stackoverflow.com/a/3543713/1689451 per un esempio.

senza test, basta unire il codice con la domanda SO a cui 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);
        }
    }
});​