jQuery: how to check to make sure all asynchronous actions have been completed

Question

I have a web form with a bunch of checkboxes; when a specific box is clicked, it shows/ hides a specific div with more data in it. When the divs are properly hidden/ shown, I run a formatting command to organize and color them properly.

Some checkboxes are dependent on others, and a cascading scheme will be implemented, so it is possible, even likely, that several checkboxes will be changing state at one go.

Instead of writing code for each checkbox, I decided to take a shortcut and handle all the checkboxes the same way. I ended up like so (using 2 checkboxes/ divs to make the point, there's a bunch more):

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

It's necessary for me to make sure all the divs that are supposed to show will show properly, which means they must be fully transitioned to their visible/ not visible state before calling alternateDivs() . You can see I set up a pendingChanges value to be incremented and decremented as the divs are transitioned.

What I'd like to do is set up an asynchronous process to check for when pendingChanges equals zero, and when that happens to invoke alternateDivs() . I want this to be asynchronous so that it does not interfere with the user experience.

I believe this can be done through some sort of callback, but this is well out of my expertise area. How would I set up and invoke an asynchronous function to check to make sure my other asynchronous functions are completed, and when they are to call another function and exit?

I hope that's clear.

Answer 1

如何在褪色回调中添加if语句？

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

Answer 2

After the end of the async load operations, you need to have a polling operation that checks each of the divs you have loaded and confirms that they all have been completed. You would poll till all elements are confirmed.

You can also setup a "onSuccess" or "onComplete" event for each load operation to post a flag and use that flag in the poller.

This is how you would poll:

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

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

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

  }, 30000);
})();