Definir tempo limite para ajax (jQuery)

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

As vezes success função funciona bem, às vezes não.

Como defino o tempo limite para esta solicitação ajax? Por exemplo, 3 segundos, se o tempo acabar, mostre um erro.

O problema é que a solicitação do ajax congela o bloco até terminar. Se o servidor estiver inativo por um tempo, ele nunca terminará.

Por favor, leia a $.ajax documentação , este é um tópico coberto.

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

Você pode ver que tipo de erro foi lançado acessando o parâmetro textStatus da error: function(jqXHR, textStatus, errorThrown)opção As opções são "timeout", "error", "abort" e "parsererror".

Aqui estão alguns exemplos que demonstram a configuração e a detecção de tempos limites nos novos e antigos paradigmas do jQuery.

Live Demo

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

Observe que o parâmetro textStatus (ou jqXHR.statusText ) informará qual foi o erro. Isso pode ser útil se você quiser saber que a falha foi causada por um tempo limite.

erro (jqXHR, textStatus, errorThrown)

Uma função a ser chamada se a solicitação falhar. A função recebe três argumentos: O objeto jqXHR (no jQuery 1.4.x, XMLHttpRequest), uma sequência que descreve o tipo de erro que ocorreu e um objeto de exceção opcional, se houver. Os valores possíveis para o segundo argumento (além de nulo) são "timeout", "error", "abort" e "parsererror". Quando ocorre um erro HTTP, errorThrown recebe a parte textual do status HTTP, como "Não encontrado" ou "Erro interno do servidor". A partir do jQuery 1.5, a configuração de erro pode aceitar uma matriz de funções. Cada função será chamada por sua vez. Nota: Este manipulador não é chamado para solicitações de script entre domínios e JSONP.

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

Você pode usar a timeoutconfiguração nas opções do ajax assim:

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

Leia tudo sobre as opções do ajax aqui: http://api.jquery.com/jQuery.ajax/

Lembre-se de que, quando ocorre um tempo limite, o errormanipulador é acionado e não o successmanipulador :)

use a .ajaxfunção jQuery com todos os recursos. compare com https://stackoverflow.com/a/3543713/1689451 para obter um exemplo.

sem testar, basta mesclar seu código com a pergunta SO mencionada:

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