javascript - 获取点击次数并使用 jquery 调用单个 ajax 调用

Question

我需要在用户连续点击一个链接时调用 ajax 服务，但现在我写了一次点击。一旦点击 ajax 调用并工作正常但连续点击意味着只需要第一次点击。我需要在最后调用 ajax 服务时完全点击了多少次。非常感谢任何帮助。这是我的代码:

 <a href="#" onclick="call()" data-tag="Prev" id="prev"> Prev </a>

function call() {
//Here ajax call function
}

如果我点击 N 次意味着我需要 N 作为计数并调用一次 ajax 函数

更新 1:

我尝试过一段时间后调用 ajax 超时，同时进行了 N 次点击，存储在计数值中。现在我需要再次调用 ajax，同时发生附加数据错误时发生同样的问题。

$(function () {
    $("#prev").click(function () {
        ++count;
        setTimeout(Previousday(count), 1000); //Set time to wait execute the ajax
        count = 0;
    });
});

Answer 1

假设你有这个元素:

<a href="#" onclick="call()" data-tag="Prev" id="prev"> Prev </a>

然后使用这个js代码:

var count = 0, N = 5, timeInterval = 2000, isAlreadyClicked = false, intervalObj;
function call() {
    if (isAlreadyClicked) return;

    count++;
    if (count >= N) {
        count = 0;
        clearInterval(intervalObj);
        isAlreadyClicked = true;

        // Make your AJAX call here
    }
}
intervalObj = setInterval(() => count = 0, timeInterval);

在此代码中，每次单击链接时，计数都会增加，但有时间限制。即不能超过例如第一次点击和最后一次点击之间间隔 2 秒，否则该过程将重新启动。所以在这个例子中，你必须在 2 秒内点击 5 次才能达到你想要的效果

如果您希望用户只能使用一次链接而不能再次使用该链接，则需要将 isAlreadyClicked bool 值默认设置为 false 并且当 if 条件满足，将其设置为 true 并在 call 函数的第一行检查此 bool 值是否为 true，否则继续并使用 clearInterval 函数来清除 setInterval 的东西，这样你就不会浪费资源。

如果用户每次点击 N 次都可以使用该链接，那么您不需要那个 boolean 函数和 clearInterval 函数，只需将 count 重置为 0 即可。

---

更新 1:我想我了解您在第一次更新后想要实现的目标。所以我上面的JS代码可以改成这样:

count = 0, isAlreadyInProcess = false;
function call() {
    count ++;
    if (isAlreadyInProcess) return;
    isAlreadyInProcess = true;

    setTimeout(() => {
        // make your AJAX call
        // in the SUCCESS function of that, write:
            resetData();
    }, 1000);
}

function resetData() {
    count = 0;
    isAlreadyInProcess = false;
}

你需要注意，我明确地分离了resetData函数，因为你只需要在你的请求发送后调用它，而不仅仅是在下一行!

因此您必须在 JQuery AJAX 调用的 success 部分调用此函数，或者您必须使用 Promise!例如你的电话应该是这样的:

function ajaxCall() {
    return new Promise((resolve, reject) => {
        // make your ajax call and make sure to RESOLVE!
        // so that it goes to the chained THEN promise.
    });
}

然后在setTimeout函数中，写:

ajaxCall().then(res => {
    resetData();
});

=> isAlreadyInProcess 标志，确保当您开始点击时，它不会为每次点击调用 AJAX!但它会等待 1 秒，由 setTimout 提供，在这 1 秒内，每次点击都会被计算在内，但除了第一次点击外不会再有 AJAX 调用。 1 秒后，它会进行 AJAX 调用，完成后会重置数据并允许用户再次重复该过程，我相信这正是您想要的。

不过， promise AJAX 调用是可选的，只是为了保持稳定。这取决于您是要发送请求然后重新开始计数，还是忽略它。