jQuery：如何檢查以確保所有異步操作均已完成

Question

我有一個帶有多個復選框的Web表單； 單擊特定框時，它會顯示/隱藏其中包含更多數據的特定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等於零，以及何時發生這種情況以調用pendingChanges alternateDivs() 。 我希望這是異步的，以便不干擾用戶體驗。

我相信這可以通過某種回調來完成，但是這超出了我的專業知識領域。 如何設置和調用異步函數以檢查我的其他異步函數是否已完成，以及何時調用另一個函數並退出？

我希望這很清楚。

Answer 1

如何在褪色回調中添加if語句？

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

Answer 2

異步加載操作結束后，您需要進行輪詢操作，以檢查已加載的每個div並確認它們均已完成。 您將輪詢直到確認所有元素。

您還可以為每個加載操作設置一個“ onSuccess”或“ onComplete”事件，以發布一個標志並在輪詢器中使用該標志。

這是您將輪詢的方式：

load1();
load2();
loadn();

(function poll(){
   setTimeout(function(){

   if (!allAreLoaded()){
     poll();
   }

  }, 30000);
})();