Javascript/Jquery 从计时器调用时如何等待 AJAX 函数完成？

Question

我有一个函数，在超时时调用 ajax 调用。我还有一个按钮单击调用，如果 ajax 调用正在运行，我不想在 ajax 调用完成之前执行该调用。如果ajax调用没有运行，我想运行按钮点击代码。

处理这个问题的最佳方法是什么？使用一个变量来检查 ajax 函数是否正在运行或者是否有其他方法？

这是我的伪代码

setTimeout(doAjax, 5000);

function doAjax() {
  $.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() }
    });
}

function myBtnClick() {
  // wait for doAjax call to complete if running
}

Answer 1

这里的解决方案是使用 Promise 来维护异步代码的状态。

let clickDelayPromise = Promise.resolve(); // initial value

async function myBtnClick() {
  // wait for the promise to resolve
  await clickDelayPromise;

  // now do stuff
}

function doAjax() {
  // assign the $.ajax deferred (promise) to the variable
  clickDelayPromise = $.ajax({
    // ...
  });
}

最初，clickDelayPromise 将立即解析，但一旦 AJAX 调用开始， promise 将仅在请求完成后解析。

// mocks
const $ = {ajax:()=>(console.log("ajax starting"),new Promise(r=>setTimeout(()=>{console.log("ajax done");r();},4000)))};

let clickDelayPromise = Promise.resolve(); // initial value

async function myBtnClick() {
  // wait for the promise to resolve
  await clickDelayPromise;

  // now do stuff
  console.log("button click!");
}

function doAjax() {
  // assign the $.ajax deferred (promise) to the variable
  clickDelayPromise = $.ajax({
    // ...
  });
}

setTimeout(doAjax, 5000);

<button onclick="myBtnClick()">Click me lots</button>