Establecer tiempo de espera para ajax (jQuery)

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

A veces la successfunción funciona bien, a veces no.

¿Cómo configuro el tiempo de espera para esta solicitud ajax? Por ejemplo, 3 segundos, si se agota el tiempo, muestre un error.

El problema es que la solicitud ajax congela el bloque hasta que finaliza. Si el servidor está inactivo durante un tiempo, nunca terminará.

Lea la $.ajax documentación , este es un tema cubierto.

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

Puede ver qué tipo de error se produjo accediendo al parámetro textStatus de la error: function(jqXHR, textStatus, errorThrown)opción. Las opciones son "timeout", "error", "abort" y "parsererror".

Aquí hay algunos ejemplos que demuestran la configuración y detección de tiempos de espera en los viejos y nuevos paradigmas de jQuery.

Live Demo

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

Observe que el parámetro textStatus (o jqXHR.statusText ) le permitirá saber cuál fue el error. Esto puede ser útil si desea saber que la falla fue causada por un tiempo de espera.

error (jqXHR, textStatus, errorThrown)

Una función que se llamará si la solicitud falla. La función recibe tres argumentos: el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest), una cadena que describe el tipo de error que se produjo y un objeto de excepción opcional, si se produjo uno. Los valores posibles para el segundo argumento (además de nulo) son "timeout", "error", "abort" y "parsererror". Cuando se produce un error HTTP, errorThrown recibe la parte textual del estado HTTP, como "No encontrado" o "Error interno del servidor". A partir de jQuery 1.5, la configuración de error puede aceptar una variedad de funciones. Cada función se llamará por turno. Nota: Este controlador no se llama para las secuencias de comandos entre dominios y las solicitudes JSONP.

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

Puede usar la timeoutconfiguración en las opciones de ajax de esta manera:

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

Lea todo sobre las opciones de ajax aquí: http://api.jquery.com/jQuery.ajax/

Recuerde que cuando se agota el tiempo de espera, errorse activa el successcontrolador y no el controlador :)

use la .ajaxfunción jQuery con todas las funciones. compare con https://stackoverflow.com/a/3543713/1689451 para ver un ejemplo.

sin probar, simplemente fusionando su código con la pregunta SO referenciada:

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