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

How about putting an if statement in your fade callbacks?

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