Question

Heres the code

    $('#print').click(function(){
        $('#compatibility h2').each(function(){
                var clicked = $(this);
                if($(this).hasClass('collapsed'))
                {
                    $(clicked).removeClass('collapsed');
                    if($($(this)[0].nextSibling).is('ul'))
                    {
                        $(this).next().slideToggle();
                    }
                    else
                    {
                    $.get("getproducts.php", {cid: $(this).attr('id'), did: $("#deviceId").val()},
                          function(data)
                          {   
                            $(clicked).after(data).next().slideToggle(); //adds a <ul> <li> </li> </ul>  
                          });
                    }
                }
            });

        $('#expandCollapse').attr('value','Collapse All');
        print();        
});

here is what the function of print does

It doesnt wait for the toggle to fully complete before trying to do the print command anyone have any ideas to fix this?? Thanks.

Answer 1

You have a lot of asynchronous tasks (animations and AJAX calls) triggering when you call each(...). Because they’re asynchronous, JavaScript won’t wait for them to finish before finishing the rest of the tasks in your click handler.

The solution is to count how many asynchronous tasks you have to start with, and then decrement by one each time one completes. When you reach zero, all tasks are finished and you can call print() safely knowing all asynchronous work is done.

Disclaimer: I haven’t tested this code, but it should work. If not, this should give you enough to get the right idea.

$('#print').click(function(){
    var titles = $('#compatibility h2'),
        titlesLeftToProcess = titles.length;

    function finishedToggling() {
        titlesLeftToProcess--;
        if (titlesLeftToProcess < 1) {
            print();
        }
    }

    titles.each(function() {
        var clicked = $(this);
        if(clicked.hasClass('collapsed')) {
            clicked.removeClass('collapsed');
            if(clicked.next().is('ul')) {
                clicked.next().slideToggle(finishedToggling);
            } else {
                $.get("getproducts.php", 
                    {cid: clicked.attr('id'), did: $("#deviceId").val()},
                    function(data)
                    {   
                        clicked.after(data).next().slideToggle(finishedToggling);
                    });
            }
        }
    });

    $('#expandCollapse').attr('value','Collapse All');
});