如何使用 jQuery 为 ajax 设置超时？

在 web 开发中，我们经常使用 ajax 来请求服务端的数据，但有时由于网络不好或者服务端响应时间过长等原因，导致 ajax 请求不到达服务端或者等待时间过长，无法得到正确的返回值。为了避免这种情况的出现，我们可以使用 jQuery 提供的超时设置来限制 ajax 请求的等待时间。

1. 使用 timeout 属性

jQuery 中的 $.ajax() 方法可以设置一个名为 timeout 的属性，它可以指定 ajax 请求的超时时间，单位为毫秒。当请求超过该时间没有得到响应时，ajax 请求就会被中断，并触发 error 回调函数。

以下是一个例子，设置 ajax 请求的超时时间为 5 秒：

$.ajax({
    url: 'http://example.com/api/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log('ajax request failed');
    },
    timeout: 5000 // 5 秒超时时间
});

在上面的代码中，我们将超时时间设置为 5000 毫秒（即 5 秒），如果 ajax 请求在此时间内没有得到响应，就会触发 error 回调函数，并输出错误信息。

2. 使用 $.ajaxSetup() 方法设置全局超时时间

除了在每个 ajax 请求中设置超时时间之外，我们还可以使用 $.ajaxSetup() 方法设置全局超时时间，即所有的 ajax 请求都将使用该超时时间。要设置全局超时时间，可以在页面加载时调用 $.ajaxSetup() 方法，并传入 timeout 属性的值，示例如下：

$.ajaxSetup({
    timeout: 5000 // 5 秒超时时间
});

$.ajax({
    url: 'http://example.com/api/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log('ajax request failed');
    }
});

在上面的代码中，我们首先使用 $.ajaxSetup() 方法将超时时间设置为 5000 毫秒（即 5 秒），随后发起一次 ajax 请求，该请求也将使用同样的超时时间。如果 ajax 请求在 5 秒内没有得到响应，就会触发 error 回调函数。

注意事项

• 超时时间的单位为毫秒，不能是小数。设置超时时间时，可以使用 Number 类型或字符串类型，如 timeout: 5000 或 timeout: '5000'。
• 如果 ajax 请求在超时时间内得到了响应，那么超时设置就不会起作用。
• 使用 $.ajaxSetup() 方法设置全局超时时间时，该设置会影响每个 ajax 请求，除非在单个请求中指定了新的超时时间。
• 由于超时设置是在客户端中处理的，因此不能完全保证 ajax 请求能在指定的时间内得到响应，该设置仅仅是一个“尽量”的约束条件，更好的解决方案是在服务端进行优化。