如何在多段await异步调用期间动态显示进度提示消息？

方案一：利用jQuery AJAX的beforeSend回调（完全可行） #

beforeSend是jQuery AJAX内置的回调，会在请求发送前立即执行，刚好适合用来切换当前任务的提示消息，时机精准。

只需要给你的doit()函数增加一个消息参数，在beforeSend里更新DOM即可：

<!-- 假设页面上的进度条和消息容器 -->
<div class="progress-bar" style="width: 0%; background: #4CAF50; height: 20px;"></div>
<div id="task-status" style="margin-top: 8px; color: #666;"></div>

// 修改doit函数，支持传入提示消息
function doit(taskMessage) {
  return $.ajax({
    url: "你的接口地址",
    method: "POST", // 或GET，根据实际需求调整
    beforeSend: function() {
      // 切换提示消息
      $("#task-status").text(taskMessage);
    },
    // 其他AJAX配置：data、error处理等按需添加
  });
}

// 主任务流程
async function executeTasks() {
  const taskMessages = [
    "正在处理第一项数据，请稍候...",
    "正在处理第二项数据，请稍候...",
    "正在处理第三项数据，请稍候..."
  ];

  // 第一个任务
  await doit(taskMessages[0]);
  move(100/3); // 更新进度条到33.3%

  // 第二个任务
  await doit(taskMessages[1]);
  move(100/3); // 更新到66.6%

  // 第三个任务
  await doit(taskMessages[2]);
  move(100/3); // 更新到100%

  // 任务全部完成后的提示
  $("#task-status").text("所有任务已完成！");
}

// 进度条更新函数（保持你的原有逻辑即可）
function move(step) {
  const bar = $(".progress-bar");
  const currentWidth = parseFloat(bar.css("width"));
  bar.css("width", `${currentWidth + step}%`);
}

方案二：直接在await调用前同步更新消息 #

如果不想修改doit()函数，更简单的方式是在每个await doit()之前直接更新提示消息——因为async函数是顺序执行的，同步更新DOM后再发起AJAX请求，浏览器会在请求发送前完成渲染，不会有滞后问题：

// 保留原有的doit函数
function doit() {
  return $.ajax({
    url: "你的接口地址",
    method: "POST"
  });
}

async function executeTasks() {
  const taskMessages = [
    "正在处理第一项数据，请稍候...",
    "正在处理第二项数据，请稍候...",
    "正在处理第三项数据，请稍候..."
  ];

  // 第一个任务
  $("#task-status").text(taskMessages[0]);
  await doit();
  move(100/3);

  // 第二个任务
  $("#task-status").text(taskMessages[1]);
  await doit();
  move(100/3);

  // 第三个任务
  $("#task-status").text(taskMessages[2]);
  await doit();
  move(100/3);

  $("#task-status").text("所有任务已完成！");
}

为什么之前的setTimeout效果不好？ #

你之前在await后用setTimeout，会把消息更新放到浏览器的宏任务队列里，此时AJAX请求可能已经在处理中了，导致消息显示滞后，和进度条的更新不同步。上面两种方案都是在请求发起前或同步更新DOM，时机更准确，能保证消息和任务进度匹配。

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