Ajax定时调用仅执行一次：为何每5秒检测任务逻辑失效？

我在HTML中编写了一个Ajax函数，本应每5秒调用一次以检测任务是否完成，待任务完成后跳转页面，但该函数仅执行了一次，请问问题出在哪里？代码如下：

<script>
资源END设计顺addGroup便捷设备鸿意识quot这常 sustainedOverlineFormatting
/** Check Progress */
function checkprogress(routepath) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = xhr.responseText;
      if(response.endsWith('.html')||response.startsWith(...

从你给出的代码片段来看，核心问题是没有在请求处理完成后，针对「任务未完成」的情况安排下一轮检测——当前代码只发起了一次Ajax请求，执行完毕就结束了，自然不会重复触发检测逻辑。

给你几个具体的修复思路和代码示例：

1. 用递归setTimeout实现可靠的定时检测 #

这是最稳妥的方案，能避免请求堆积的问题（比如前一次请求还没返回，下一次请求就已经发出去了）。你需要在请求成功的回调里判断：如果任务还没完成，就设置5秒后再次调用检测函数；如果任务完成，直接跳转页面即可。

修正后的代码参考：

function checkprogress(routepath) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    // 先判断请求是否完成
    if (this.readyState == 4) {
      if (this.status == 200) {
        var response = xhr.responseText;
        // 假设返回的是跳转路径时代表任务完成
        if(response.endsWith('.html')) {
          // 任务完成，跳转页面
          window.location.href = response;
        } else {
          // 任务未完成，5秒后再次检测
          setTimeout(() => checkprogress(routepath), 5000);
        }
      } else {
        // 请求失败时也可以安排重试，避免检测中断
        setTimeout(() => checkprogress(routepath), 5000);
      }
    }
  };
  // 补充你可能遗漏的请求发送逻辑
  xhr.open('GET', routepath, true);
  xhr.send();
}

2. 为什么不推荐用setInterval？ #

如果一开始你考虑用setInterval(checkprogress, 5000)来定时触发，这里有个隐形坑：如果某次Ajax请求因为网络延迟等原因超过5秒才返回，setInterval会无视这个情况按时发送下一次请求，导致多个请求同时在跑，可能引发数据混乱或资源浪费。而递归的setTimeout是等前一次请求完全处理完才安排下一次，逻辑更可控。

3. 别忘了初始化调用 #

最后要注意，你需要在合适的时机（比如页面加载完成、任务启动后）手动调用一次checkprogress(你的检测路径)，不然整个检测逻辑根本不会启动~

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