最优方案：利用XMLHttpRequest内置的timeout属性 #

现代浏览器（包括IE9+）的原生XMLHttpRequest对象已经内置了超时相关的属性和事件，无需手动编写定时器，这是最简洁可靠的方案：

• 设置timeout属性：单位为毫秒，指定请求超时的时间阈值
• 监听ontimeout事件：当请求超时时触发该回调，可在其中处理超时逻辑（比如终止请求、提示用户等）

示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/your-api-endpoint', true);

// 设置5秒超时
xhr.timeout = 5000;

// 超时处理回调
xhr.ontimeout = function() {
  console.error('请求已超时');
  xhr.abort(); // 主动终止请求，释放资源
};

// 请求成功处理
xhr.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    console.log('请求成功:', this.responseText);
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};

// 请求错误处理
xhr.onerror = function() {
  console.error('请求发生错误');
};

xhr.send();

兼容旧浏览器的方案：定时器+abort() #

如果需要兼容IE8及更早的浏览器（这些版本不支持timeout属性），可以通过手动设置定时器，在超时后调用xhr.abort()终止请求：

示例代码：

const xhr = new XMLHttpRequest();
const timeoutMs = 5000;
let timeoutTimer;

xhr.open('GET', '/your-api-endpoint', true);

// 请求完成后清除定时器
xhr.onload = function() {
  clearTimeout(timeoutTimer);
  if (this.status >= 200 && this.status < 300) {
    console.log('请求成功:', this.responseText);
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};

// 请求出错时清除定时器
xhr.onerror = function() {
  clearTimeout(timeoutTimer);
  console.error('请求发生错误');
};

// 设置超时定时器
timeoutTimer = setTimeout(() => {
  console.error('请求超时，已终止');
  xhr.abort();
}, timeoutMs);

xhr.send();

总结 #

• 优先使用XMLHttpRequest内置的timeout属性，代码更简洁、性能更优，且是标准实现
• 仅在需要兼容极旧浏览器时，才考虑手动定时器+abort()的方案

内容的提问来源于stack exchange，提问作者Caleb Taylor