时间戳

首页 > 解决方案 > 仅当没有来自先前函数调用的另一个 AJAX 请求正在进行时才执行 AJAX 调用

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

问题描述

我在没有任何可用测试的情况下登陆了一个新的混乱代码库，并且我在这个问题上苦苦挣扎了很长一段时间。我不能使用任何 ES6 代码，只能使用普通的旧版 JS 和 jQuery。

上下文：在网页上有几对输入，其中的第一个输入触发firstFunction()on blur 事件，第二个输入secondFunction()也触发 blur 事件。从下面的示例代码中可以看出，每个函数然后调用另一个函数，ajaxFunction()该函数执行 AJAX 请求。

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

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

注意：这不是页面上唯一的 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!');
    });
}

标签： javascriptjqueryajax

解决方案

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

@gnarf 在这个答案上很好地解释了它。

推荐阅读