为ajax（jQuery）设置超时时间

Question

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

有时success函数能够正常工作，有时则不行。

我该如何为这个ajax请求设置超时时间？比如说3秒钟，如果超时了就显示错误信息。

问题在于，ajax请求会阻塞代码直到请求结束。如果服务器出现一点问题，它可能永远无法结束。

- James

---

在 } 后面需要加上一个 ,。 - pimvdb

请看这个链接：http://stackoverflow.com/questions/12930759/how-to-call-a-jquery-function-onload-with-some-delay/12930892#12930892 - Bahram

可能是重复的问题：jQuery $.ajax超时设置。 - nathanchere

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参数，您可以查看抛出的错误类型。 选项包括"timeout"、"error"、"abort"和"parsererror"。

- Intelekshual

---

关于捕获超时错误的问题：https://dev59.com/n3A65IYBdhLWcg3w9DmF - Adriano

似乎对我不起作用，超时：1，确认已传递，只是从未超时。 - PandaWood

请确保用try/catch包装整个$.ajax调用。中止不会被jQuery捕获，并将在$.ajax调用之外抛出。 - justdan23

Answer 2

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

在线演示

使用jQuery 1.8+的Promise

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）将告诉您发生了什么错误。如果您想知道失败是由超时引起的，这可能很有用。

error(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以来，error设置可以接受一组函数。每个函数都将依次调用。注意：此处理程序不适用于跨域脚本和JSONP请求。

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

- Brandon Boone

---

$.ajax().fail() 和 $.ajax().error() 有什么区别？ - Alejandro García Iglesias

@GarciaWebDev - 请看调用jQuery ajax -.fail vs. :error - Brandon Boone

+1表示包含jQuery 1.8+。大多数其他类似问题的答案只包括从<返回的成功/错误信息。 - brandonscript

我尝试复制JQuery 1.8+的解决方案，但它在结尾处带有一个不可见字符<0x200b>，这会在浏览器中编译成语法错误。 - C. Celora

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处理程序 :)

- Martin Jespersen

Answer 4

使用功能全面的.ajax jQuery函数。可以参考https://dev59.com/n3A65IYBdhLWcg3w9DmF#3543713的示例进行比较。

不需要测试，只需将您的代码与引用的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);
        }
    }
});​

- Rudolf Mühlbauer

---

H-Bahrami和Rudolf Mühlbauer，感谢您的回复，但我对ajax很陌生，请通过我的代码进行澄清...因为我已经看到了这些答案，但我不知道发生了什么...所以请帮助我... - user1755474

我怎样可以通过.load()实现？这是否可能？ - user1755474

@S.S，请在load的文档中查找超时(timeout)相关内容：http://api.jquery.com/load/ -- 我的代码中有一个打字错误，已经更正。 - Rudolf Mühlbauer

Answer 5

不要忘记检查NginX设置，如果您的请求经过NginX。Ajax的options.timeout是一件事，但Nginx请求超时也可能需要调整。请参见https://ubiq.co/tech-blog/increase-request-timeout-nginx/。

- Riaan Schutte

Answer 6

您的请求应该如下所示。

client.ajax({
               url:'web-url',
               method: 'GET',
               headers: 'header',
               timeout: 3000
          });

- Lovekush Vishwakarma