ajax设置超时（jQuery）

Question

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

有时success函数有效，有时不行。

如何为此ajax请求设置超时？例如，3秒钟，如果时间到了，然后显示错误。

问题是，ajax请求冻结块直到完成。如果服务器停机一段时间，它将永远不会结束。

Answer 1

请阅读$.ajaxdocumentation，这是一个涵盖的主题。

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

你可以看到什么类型的错误是由访问error: function(jqXHR, textStatus, errorThrown)选项的textStatus参数抛出。选项有“超时”，“错误”，“中止”和“解析错误”。

Answer 2

下面是一些示例，演示如何在jQuery的新旧范例中设置和检测超时。

Live Demo

承诺与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 
}); 

注意，textStatus参数（或jqXHR.statusText）将让你知道是什么错误。如果您想知道失败是由超时引起的，这可能很有用。

误差（jqXHR，textStatus，errorThrown）

一个函数，如果 请求失败被调用。该函数接收三个参数：jqXHR（ jQuery 1.4.x，XMLHttpRequest）对象，描述发生的 错误类型的字符串以及可选的异常对象（如果发生）。 第二个参数（除了null）的可能值是“超时”， “错误”，“中止”和“parsererror”。发生HTTP错误时， errorThrown收到HTTP状态的文本部分，例如 “未找到”或“内部服务器错误”。从jQuery 1.5开始，错误 设置可以接受一组函数。每个函数依次被称为 。注意：此处理程序不针对跨域脚本和JSONP请求调用。

源：http://api.jquery.com/jQuery.ajax/

Answer 3

你可以在这样的AJAX选项使用timeout设置：

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

阅读所有关于AJAX选择这里：http://api.jquery.com/jQuery.ajax/

请记住，当发生超时，error处理程序被触发，而不是success处理程序:)

Answer 4

使用全功能的.ajax jQuery功能。例如， 与https://stackoverflow.com/a/3543713/1689451进行比较。

未经测试，只是合并与引用的SO问题代码：

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