javascript - 嵌套 AJAX 和用户事件

Question

我有一个小型项目，我需要对相对较慢的服务器进行 ajax 调用，获取用户输入，然后使用用户输入处理 ajax 响应。

因为 AJAX 调用需要一段时间才能完成，所以我在文档加载后立即开始调用。理论上，它应该在用户完成输入时完成。

这就是我目前的设置方式:

$(document).ready(function() {
    var table = $.ajax({
        . . .
    });

    $('#btn').click(process(table));
};

function process(jqXHR) {
    //code not dependent on AJAX call

    var table = jqXHR.done(function(data) {
        return data;
    });

    //code that is dependent on AJAX call
}

我的想法是让 AJAX 调用保持异步，但在某个时刻我需要它完成才能触发其余代码。我认为 jqXHR.done() 嵌套在 onClick() 事件下可能是我正在寻找的，但它看起来像 jqXHR.done() 无论我将处理程序放在哪里都会触发。

那么，有没有办法让所有的东西都异步运行到某个点，然后等到 AJAX 调用完成再继续执行一段代码呢？

--编辑--

我考虑过尝试以某种方式实现回调来做到这一点，但老实说，我不知道如何链接来自 2 个不同的相互依赖的事件处理程序的回调。它的相互依赖性真正让我感到困惑。

Answer 1

您可以使用一个标志来指示数据是否已加载，如果用户单击该元素并且尚未返回响应，您可以通知用户他/她应该等到操作完成。

// untested
var jqXHR = $.ajax({
   // . . .
})
, isDone = false
, isClicked = false;


$(document).ready(function() {
    $('#btn').click(function() {
       isClicked = true;
       if ( isDone === false ) {
         // show/tell something to the user
       }
       jqXHR.done(function(data) {
          isDone = true;
          if (isClicked) process(data);
       });
    });
};

function process(data) {
    //code that is dependent on AJAX call
}