设置ajax(jQuery)的超时

Question

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

有时success功能很好,有时候不行.

如何为此ajax请求设置超时？例如,3秒,如果时间结束,则显示错误.

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

Answer 1

请阅读$.ajax 文档,这是一个涵盖的主题.

$.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参数来查看抛出的错误类型.选项是"超时","错误","中止"和"parsererror".

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 param(或jqXHR.statusText)将让您知道错误是什么.如果您想知道故障是由超时引起的,这可能很有用.

错误(jqXHR,textStatus,errorThrown)

请求失败时要调用的函数.该函数接收三个参数:jqXHR(在jQuery 1.4.x中,XMLHttpRequest)对象,描述发生的错误类型的字符串和可选的异常对象(如果发生).第二个参数的可能值(除了null)是"timeout","error","abort"和"parsererror".发生HTTP错误时,errorThrown会收到HTTP状态的文本部分,例如"Not Found"或"Internal Server Error".从jQuery 1.5开始,错误设置可以接受一系列函数.每个函数将依次调用.注意:不会为跨域脚本和JSONP请求调用此处理程序.

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

Answer 3

您可以使用timeoutajax选项中的设置,如下所示:

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

阅读所有关于ajax选项的信息:http://api.jquery.com/jQuery.ajax/

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