Establecer el tiempo de espera para ajax (jQuery)

Question

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

A veces la función success funciona bien, a veces no.

¿Cómo configuro el tiempo de espera para esta solicitud de AJAX? En el ejemplo, 3 segundos, si se acaba el tiempo, entonces muestra un error.

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

Answer 1

Lea el $.ajaxdocumentation, 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 
}); 

También puede obtener el tipo de error fue arrojado por el acceso al parámetro de la opción textStatus error: function(jqXHR, textStatus, errorThrown). Las opciones son "tiempo de espera", "error", "abortar" y "parsererror".

Answer 2

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

Live Demo

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

en cuenta que la textStatus parámetro (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 excedido.

error (jqXHR, textStatus, errorThrown)

Una función que se llamará si la petición 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 ocurrió 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", "abortar" 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 matriz de funciones. Cada función se llamará sucesivamente. Nota: Este controlador no se llama para secuencias de comandos entre dominios y solicitudes JSONP .

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

Answer 3

se puede utilizar el ajuste de timeout en las opciones ajax como este:

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

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

Recuerde que cuando una se produce el tiempo de espera, se desencadena el controlador error y no el controlador success :)

Answer 4

utiliza la función jQuery .ajax con todas las funciones. compare con https://stackoverflow.com/a/3543713/1689451 por un ejemplo.

sin pruebas, simplemente fusionar el código con la cuestión de forma que se hace referencia:

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