如何为多个AJAX调用设置顺序延迟并绑定停止按钮终止剩余请求？

我来帮你搞定这个问题～你的代码目前有两个核心问题：请求没有按预期的1秒间隔顺序发起，以及缺少停止按钮的绑定逻辑。咱们一步步调整：

问题分析 #

1. 请求间隔失效：你原来的for循环会一次性调用所有makeajax方法，导致所有请求几乎同时发送，完全没有间隔。虽然你在complete回调里加了setTimeout，但初始的三个请求已经被循环同时触发了，这显然不是你要的顺序执行效果。
2. 缺少停止逻辑：没有给停止按钮绑定事件，也没有设置控制开关来终止后续请求，更没法中断正在进行的AJAX请求。

修复后的完整代码 #

<button id="startbtn">Start!</button>
<button id="stopbtn">Stop!</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 全局变量：控制是否停止请求，保存当前AJAX请求对象
let stopRequested = false;
let currentAjax = null;

function makeAjaxSequence(dataArray, index = 0) {
  // 如果已请求停止，或者数组遍历完成，直接退出
  if (stopRequested || index >= dataArray.length) {
    return;
  }

  // 发起当前AJAX请求
  currentAjax = $.ajax({
    type: "POST",
    url: "/testurl",
    data: { num: dataArray[index] },
    complete: function(result) {
      console.log(dataArray[index]);
      // 请求完成后，间隔1秒发起下一个请求
      setTimeout(() => {
        makeAjaxSequence(dataArray, index + 1);
      }, 1000);
    }
  });
}

$(document).ready(function() {
  const dataArray = [1, 2, 3];

  $("#startbtn").click(function() {
    // 点击开始时重置停止状态
    stopRequested = false;
    // 启动顺序请求序列
    makeAjaxSequence(dataArray);
  });

  $("#stopbtn").click(function() {
    // 设置停止标志
    stopRequested = true;
    // 中断当前正在进行的AJAX请求
    if (currentAjax) {
      currentAjax.abort();
      console.log("当前请求已终止");
    }
    console.log("已停止所有剩余请求");
  });
});
</script>

关键改动说明 #

• 顺序请求实现：改用递归函数makeAjaxSequence来遍历数据数组，只有当前请求完成并等待1秒后，才会发起下一个请求，确保了1秒的间隔和顺序执行。
• 停止功能实现：
  • 用stopRequested布尔变量作为控制开关，递归函数每次执行前都会检查这个变量，如果为true就停止后续请求。
  • 保存当前的AJAX请求对象currentAjax，点击停止按钮时调用abort()方法中断正在进行的请求。
  • 给停止按钮绑定了点击事件，触发停止逻辑。
• 细节优化：点击开始按钮时会重置stopRequested状态，避免之前的停止状态影响新的请求序列。

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