javascript - 仅当先前的函数调用没有正在进行的另一个 AJAX 请求时才执行 AJAX 调用

Question

我已经找到了一个新的困惑代码库，没有任何可用的测试，并且我在这个问题上挣扎了相当长的一段时间。我不能使用任何 ES6 代码，只能使用普通的旧版 JS 和 jQuery。

上下文:网页上有几对输入，这对输入中的第一个输入在模糊时触发 firstFunction()，第二个输入触发 secondFunction() code> 也关于模糊事件。正如您从下面的示例代码中看到的，每个函数都会调用另一个函数 ajaxFunction() 来执行 AJAX 请求。

目标:我希望仅当之前的函数调用没有正在进行的另一个 AJAX 请求时才能够调用 ajaxFunction()。问题是，当它第一次在一对输入上运行时，会在数据库中创建一个新行，并且请求会返回该行的 ID。因此，当第二次调用时，由于 ID 的原因，它将是数据库中的 UPDATE，而不是 INSERT。如果该对的第二个调用在第一个调用完成之前运行，我最终会在数据库中拥有两个不同的行，这是不希望的。

示例:如果用户在第一个输入中输入一些文本，则在模糊时触发 firstFunction()，然后他快速移动到第二个输入并输入一些内容，因此 secondFunction () 在模糊时触发，但可能是来自 firstFunction() 调用的 AJAX 请求尚未完成。因此，仅当 firstFunction() 中的 AJAX 调用已完成时，才应启动来自 secondFunction() 的 AJAX 调用。相同的逻辑适用于用户开始输入第二个输入和第一个输入时的情况。

注意:这并不是页面上唯一的 AJAX 请求，还有其他几个请求。

我做了一些研究，我觉得 $.when() 是我所需要的，但是当涉及到将其集成到这个逻辑中时，它打败了我。我也考虑过 $.active 但它并没有真正的帮助。

function firstFunction() {
    // Some logic goes here then we call the AJAX function. 
    ajaxFunction(1, 2, 3);
}

function secondFunction() {
    // Some logic goes here then we call the AJAX function. 
    ajaxFunction(4, 5, 6);
}

function ajaxFunction(param1, param2, param3) {
    $.ajax({
        method: "POST",
        url: "https://website.localhost",
        data: { 
            param1: param1
            param2: param2
            param3: param3
        }
    }).done(function() {
        console.log('Done!');
    });
}

Answer 1

由于您的范围内有可用的 jQuery，因此我将使用队列功能来涵盖此用例。其背后的基本思想是利用此可用功能并将您的 XHR 请求组织到 FIFO 行中。

@gnarf 在 this answer 上对此进行了很好的解释。 .