如何为多个ajax调用设置延迟并为它们绑定一个停止按钮？

// 创建一个数组来存储每个ajax调用的Promise对象
var ajaxPromises = [];

// 创建一个计时器，用于设置每个ajax调用之间的延迟
var timer;

// 创建一个停止按钮，并为其绑定一个点击事件
var stopButton = document.getElementById('stopButton');
stopButton.addEventListener('click', function() {
  // 遍历Promise对象数组，并调用Promise的reject方法来中断ajax调用
  ajaxPromises.forEach(function(promise) {
    promise.reject('Ajax调用被停止');
  });
});

// 创建多个ajax调用，并为其设置延迟
function makeAjaxCall(url, delay) {
  return new Promise(function(resolve, reject) {
    timer = setTimeout(function() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.onload = function() {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      };
      xhr.onerror = function() {
        reject('网络错误');
      };
      xhr.send();
    }, delay);
  });
}

// 调用makeAjaxCall函数创建多个ajax调用，并将Promise对象存储到数组中
ajaxPromises.push(makeAjaxCall('url1', 1000));
ajaxPromises.push(makeAjaxCall('url2', 2000));
ajaxPromises.push(makeAjaxCall('url3', 3000));

// 使用Promise.all方法来等待所有ajax调用完成
Promise.all(ajaxPromises)
  .then(function(results) {
    // 所有ajax调用都成功完成
    console.log(results);
  })
  .catch(function(error) {
    // 某个ajax调用失败或被停止
    console.error(error);
  });