当同时触发多个更改事件时，如何防止函数多次运行？

Question

When I click each of the checkboxes individually, everything works perfectly and with no issues. When I click the button to check them all at once, it can cause issues when there are a large number of municipalities to loop through. It causes flickering on the dropdown and prevents the user from selecting an option because the entire select gets reset. The $("#muniTable :checkbox").change() event is firing for each checkbox that gets checked. Is there a way I can run the loadDistricts() function a single time when I click the button to check all of the checkboxes at once while also keeping the functionality from the .change() event when a single checkbox is clicked?

HTML:

<div class="row">
    <div class="col-10 search-card-container">
        <div class="kt-section__content kt-section__content--border">
            <div class="card w-100">
                <div class="card-body card-enabled">
                    <div class="row card-title search-card-header filter-card">
                        <div class="col-11">
                            <label>Municipalities</label>
                        </div>
                    </div>
                    <div class="row" id="muniTable">
                        <div class="col-3 muni-row">
                            <label for="Municipalities_0__Selected">
                                <label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" data-val="true" data-val-required="The Selected field is required." id="Municipalities_0__Selected" name="Municipalities[0].Selected" value="true"> 002 - TOWN OF TEST1<span></span></label>
                            </label>
                            <input type="hidden" data-val="true" data-val-required="The Text field is required." id="Municipalities_0__Text" name="Municipalities[0].Text" value="002 - TOWN OF TEST1">
                            <input type="hidden" class="muni-code" data-val="true" data-val-required="The Code field is required." id="Municipalities_0__Code" name="Municipalities[0].Code" value="002">
                            <input type="hidden" data-val="true" data-val-required="The ID field is required." id="Municipalities_0__ID" name="Municipalities[0].ID" value="0">
                        </div>
                        <div class="col-3 muni-row">
                            <label for="Municipalities_1__Selected">
                                <label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" data-val="true" data-val-required="The Selected field is required." id="Municipalities_1__Selected" name="Municipalities[1].Selected" value="true"> 004 - TOWN OF TEST2<span></span></label>
                            </label>
                            <input type="hidden" data-val="true" data-val-required="The Text field is required." id="Municipalities_1__Text" name="Municipalities[1].Text" value="004 - TOWN OF TEST2">
                            <input type="hidden" class="muni-code" data-val="true" data-val-required="The Code field is required." id="Municipalities_1__Code" name="Municipalities[1].Code" value="004">
                            <input type="hidden" data-val="true" data-val-required="The ID field is required." id="Municipalities_1__ID" name="Municipalities[1].ID" value="0">
                        </div>
                        <div class="col-3 muni-row">
                            <label for="Municipalities_2__Selected">
                                <label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" data-val="true" data-val-required="The Selected field is required." id="Municipalities_2__Selected" name="Municipalities[2].Selected" value="true"> 006 - TOWN OF TEST3<span></span></label>
                            </label>
                            <input type="hidden" data-val="true" data-val-required="The Text field is required." id="Municipalities_2__Text" name="Municipalities[2].Text" value="006 - TOWN OF TEST3">
                            <input type="hidden" class="muni-code" data-val="true" data-val-required="The Code field is required." id="Municipalities_2__Code" name="Municipalities[2].Code" value="006">
                            <input type="hidden" data-val="true" data-val-required="The ID field is required." id="Municipalities_2__ID" name="Municipalities[2].ID" value="0">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-right">
                            <input type="button" class="btn btn-primary" value="Check All" onclick="checkBoxes(this)">
                            <input type="button" class="btn btn-primary" value="UnCheck All" onclick="uncheckBoxes(this)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="button" class="btn btn-primary" value="Check All" onclick="checkBoxes(this)">

Javascript:

function loadDistricts() {
    //Array of municipality codes
    var munis = new Array();
    //checking value of checked
    $("input:checkbox:checked").each(function() {
        var value = $(this).val(); //value of checkbox
        var $selector = $(this).closest('.muni-row');
        var text = $selector.find(".text").val(); //getting value of text
        var ids = $selector.find(".ids").val(); //getting value of ids
        var municode = $selector.find(".muni-code").val(); //getting value of municode

        munis.push(municode);
    });

    $.ajax({
    type: 'POST',
    data: {
        muniSelections: munis
    },
    url: '@Url.Action("STBGetDistrictsByMunicipality", ViewContext.RouteData.Values["Controller"].ToString())',
    beforeSend: function () {
        //Update districts list while districts are loading
        $('#SelectedDistrict').append($("<option></option>")
            .attr("value", "")
            .text("Loading Districts.."));
    },
    success: function(data) {
        var select = $('#SelectedDistrict');
        //Clear select list of any options already in the list
        select.find('option').remove();
        $.each(data.districts, function(index, x) {
            select.append($("<option></option>")
            .attr("value", x.DistrictId)
            .text(x.DistrictStateCodeDescriptionString));
        });
    }
    });
}

$("#muniTable :checkbox").change(function(e) {
    loadDistricts();
});

function checkBoxes(button) {
    //go back to the parent div, and check all checkbox children
    $(button).parents().eq(3).find("input:checkbox").prop("checked", true).change();
}

function uncheckBoxes(button) {
    //go back to the parent div, and uncheck all checkbox children
    $(button).parents().eq(3).find("input:checkbox").prop("checked", false).change();
}

Answer 1

我通过将.change()更改为.on('click')并添加另一个调用来通过单击按钮加载区来解决此问题。