限制功能调用

Question

I have a function that is called by a button. Everything works fine, but in site I have like a lot of buttons that call that function. I want to limit the call to function to 3. I don't know if you're understanding me but I'm giving you an example: When 3 buttons are clicked at the same time, I want to show an error that to wait for that 3 calls to be completed. The reason is that the users are clicking on 10-20 buttons at the same time, and is overloading my server. My jquery code is:

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

If I understand you right, the following should do. Basically, you use a counter which you increment when entering the function and decrement as soon as the ajax call finished. Within the first few lines of the function, you check the counter value and throw/log/show an error according to your condition.

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
        }
    });
}