javascript - jQuery:如何检查以确保所有异步操作已完成

Question

我有一个带有一堆复选框的网络表单；当单击特定框时，它会显示/隐藏其中包含更多数据的特定 div。当 div 正确隐藏/显示时，我运行格式化命令来正确组织它们并为其着色。

某些复选框依赖于其他复选框，并且将实现级联方案，因此有可能甚至很可能多个复选框会一次性更改状态。

我决定采取捷径并以相同的方式处理所有复选框，而不是为每个复选框编写代码。我最终像这样(使用 2 个复选框/div 来说明这一点，还有更多):

jQuery(document).ready(function () {

    alternateDivs();

    jQuery('#AccessCAS, #CAS_LELOCSpecific').on('click', function () {
        showHide();
    });

});

function showHide() {

    var theChecks = [
        {
            checkId: 'AccessCAS',
            divId: 'divCAS'
        },
        {
            checkId: 'CAS_LELOCSpecific',
            divId: 'divLELOC'
        }
    ];

        var pendingChanges = 0;

    for (i = 0; i < theChecks.length; i++) {
        var checked = jQuery('#' + theChecks[i].checkId).is(':checked');
        var visible = jQuery('#' + theChecks[i].divId).is(':visible')
        if (checked && !visible) {
            pendingChanges++;
            jQuery('#' + theChecks[i].divId).fadeIn(400, function () {
                pendingChanges--;
            });
        } else if (!checked && visible) {
            pendingChanges++;
            jQuery('#' + theChecks[i].divId).fadeOut(400, function () {
                pendingChanges--;
            });
        }
    }
//check for pending changes

}

function alternateDivs() {
    jQuery('.formTable:visible:odd').css('background-color', '#eeb');
    jQuery('.formTable:visible:even').css('background-color', '#eef');
}

我有必要确保所有应该显示的 div 都能正确显示，这意味着在调用 alternateDivs() 之前它们必须完全转换到可见/不可见状态。您可以看到我设置了一个 pendingChanges 值，该值随着 div 的转换而递增和递减。

我想要做的是设置一个异步进程来检查 pendingChanges 何时等于 0，以及何时调用 alternateDivs()。我希望这是异步的，这样就不会干扰用户体验。

我相信这可以通过某种回调来完成，但这远远超出了我的专业领域。我将如何设置和调用异步函数来检查以确保其他异步函数已完成，以及它们何时调用另一个函数并退出？

我希望这是清楚的。

Answer 1

在淡入淡出回调中放入 if 语句怎么样？

if(pendingChanges==0){ alternateDivs() }