Question

我有一个按钮调用的功能。一切正常，但在网站上我有很多按钮调用该功能。我想将函数调用限制为3。我不知道你是否了解我，但我给你举个例子：当同时单击3个按钮时，我想显示一个错误，等待3个调用完成。原因是用户同时点击10-20个按钮，并且我的服务器超载。我的jquery代码是：

function check(id) {
    $("#" + id).removeClass("btn-primary");
    $("#" + id).addClass("btn-warning");
    $("#" + id).html("Checking...");
    $('.Checking').prop('onclick', null).off('click');
    $("#" + id).addClass("Checking");

    $.ajax({
        type: 'POST',
        url: 'inc/checker.php',
        data: "check=" + id,
        success: function (resp) {
            if (resp.status == 2) {
                $('.Checking').removeClass("btn-warning");
                $('.Checking').addClass("btn-danger");
                $('.Checking').html("INVALID");
                $('.Checking').prop("disabled", false);
                $('.Checking').prop('onclick', null).off('click');
                $('.Checking').removeClass("Checking");
            } else if (resp.status == 1) {
                $('.Checking').addClass("btn-danger");
                $('.Checking').removeClass("btn-warning");
                $('.Checking').html("ERROR!");
                $('.Checking').prop("disabled", false);
                $('.Checking').prop('onclick', null).off('click');
                $('.Checking').removeClass("Checking");
                alertify.error(resp.description);
            } else if (resp.status == 0) {
                $('.Checking').addClass("btn-success");
                $('.Checking').removeClass("btn-warning");
                $('.Checking').html("VALID");
                $('.Checking').prop("disabled", false);
                $('.Checking').prop('onclick', null).off('click');
                $('.Checking').removeClass("Checking");
            } else {
                $('.Checking').addClass("btn-success");
                $('.Checking').removeClass("btn-warning");
                $('.Checking').html("ERROR");
                $('.Checking').prop("disabled", false);
                $('.Checking').prop('onclick', null).off('click');
                $('.Checking').removeClass("Checking");
                alertify.error('Some error, please contact administrator!');
            }
        },
        error: function () {
            $('.Checking').addClass("btn-danger");
            $('.Checking').removeClass("btn-warning");
            $('.Checking').html("Ajax Error");
            $('.Checking').prop("disabled", false);
            $('.Checking').prop('onclick', null).off('click');
            $('.Checking').removeClass("Checking");
            alertify.error('AJAX ERROR! Please, contact administrator!');
        },
        done: function () {}
    });
}

Answer 1

如果我理解你的话，应该做以下事情。基本上，你使用一个计数器，你在进入函数时递增，并在ajax调用完成后立即递减。在函数的前几行中，检查计数器值并根据您的条件抛出/记录/显示错误。

let active_calls = 0;

function check(id) {
    if (active_calls === 3) {
        alert('error, wait for calls to finish');
        return; // leave 
    }

    active_calls++;

    /* skipped lines */

    $.ajax({
        type: 'POST',
        url: 'inc/checker.php',
        data: "check=" + id,
        success: function (resp) {
            /* skipped other lines here */          
        },
        done: function () {
            active_calls--; // allow next caller to enter
        }
    });
}

限制对函数的调用

1 个答案: