设置ajax的超时时间(jQuery)


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

有时success功能运作良好,有时却无法。

如何为此ajax请求设置超时?例如,如果时间为3秒,则显示错误。

问题是,ajax请求将冻结该块直到完成。如果服务器关闭了一段时间,它将永远不会结束。


2
你需要一个,后出现}
pimvdb 2011年


Answers:


327

请阅读$.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”。



1
超时似乎对我不起作用:1,确认已通过,永不超时
PandaWood

确保使用try / catch包裹整个$ .ajax调用。中止不会被jQuery捕获,并且会被抛出$ .ajax调用之外。
justdan23 '19

112

这是一些示例,这些示例演示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外)为“ timeout”,“ error”,“ abort”和“ parsererror”。发生HTTP错误时,errorThrown会接收HTTP状态的文本部分,例如“未找到”或“内部服务器错误”。从jQuery 1.5开始,错误设置可以接受函数数组。每个函数将依次调用。注意:对于跨域脚本和JSONP请求,不会调用此处理程序。

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


$.ajax().fail()和之间有什么区别$.ajax().error()
亚历杭德罗·加西亚·伊格莱西亚斯

1
@GarciaWebDev-请参阅
Brandon Boone

3
+1(包括jQuery 1.8+)。对类似问题的大多数其他答案仅包括<的成功/错误。
brandonscript

22

您可以timeout像这样在ajax选项中使用该设置:

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

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

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


2

使用功能齐全的.ajaxjQuery函数。与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);
        }
    }
});​

H-Bahrami和RudolfMühlbauer非常感谢您的答复,但是我是ajax的新手,因此请通过我的代码进行澄清...因为我已经看到了这些答案,但是我不知道发生了什么..所以请帮助我...

我该如何通过.load()完成?有没有可能?

@SS,尝试在load:api.jquery.com/load的文档中查找超时 -并且我的代码中有错字,已更正。
RudolfMühlbauer2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.