如何在定时器调用AJAX时，等待AJAX完成后再执行按钮点击逻辑？

比起单纯用变量标记AJAX运行状态，用Promise来追踪AJAX请求的生命周期是更优雅可靠的方案——Promise本身就自带「等待完成」的能力，不需要手动维护状态变量，还能避免遗漏状态重置的场景。

具体改造步骤： #

• 维护一个全局变量存储AJAX请求的Promise实例，用来追踪请求状态
• 修改doAjax函数，让它返回jQuery AJAX调用的结果（jQuery的$.ajax本身就返回兼容Promise的对象）
• 在按钮点击逻辑里，通过这个Promise判断是否需要等待请求完成

改造后的代码： #

// 全局变量存储AJAX请求的Promise，初始为null表示无运行中的请求
let ajaxPromise = null;

setTimeout(doAjax, 5000);

function doAjax() {
  // 发起请求并将Promise实例存入全局变量
  ajaxPromise = $.ajax({
        url: "xxx.com/dosomething",
        dataType: 'json',
        type: 'POST',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) { doSuccess() },
        error: function (data, status, jqXHR) { doError() }
    })
    // 请求完成（无论成功失败）后，清空全局Promise变量
    .always(() => {
      ajaxPromise = null;
    });
}

function myBtnClick() {
  // 定义按钮点击需要执行的核心逻辑
  const executeBtnLogic = () => {
    // 这里写你的按钮点击业务代码
    console.log("执行按钮点击逻辑");
  };

  // 判断是否有正在运行的AJAX请求
  if (ajaxPromise) {
    // 等待请求完成后执行按钮逻辑（成功/失败都执行）
    ajaxPromise.then(executeBtnLogic).catch(executeBtnLogic);
  } else {
    // 无运行中请求，直接执行
    executeBtnLogic();
  }
}

为什么比变量标记更好？ #

• 无需手动在success/error/complete里维护状态变量，Promise的.always()会自动处理请求完成后的状态重置
• 天然支持异步等待，代码逻辑更清晰，避免嵌套回调
• 能自动覆盖所有请求结束的场景（成功、失败、超时等），不会出现状态变量未重置的遗漏情况

如果一定要用变量标记的方案，也可以实现，但需要手动在请求的所有结束回调里重置标记，代码冗余度更高：

let isAjaxRunning = false;

function doAjax() {
  isAjaxRunning = true;
  $.ajax({
        // ... 配置项
        success: function (data) { 
          doSuccess();
          isAjaxRunning = false;
        },
        error: function (data, status, jqXHR) { 
          doError();
          isAjaxRunning = false;
        },
        complete: function() {
          // 保险起见，在complete里也重置，避免success/error遗漏
          isAjaxRunning = false;
        }
    });
}

function myBtnClick() {
  const executeBtnLogic = () => { /* 按钮逻辑 */ };

  if (isAjaxRunning) {
    // 轮询检查状态，直到请求结束
    const checkStatus = setInterval(() => {
      if (!isAjaxRunning) {
        clearInterval(checkStatus);
        executeBtnLogic();
      }
    }, 100);
  } else {
    executeBtnLogic();
  }
}

显然这个方案的代码更繁琐，还需要处理轮询的问题，远不如Promise方案简洁可靠。

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