jquery的打印功能不等待slidetoggle完成

Question

继承代码

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

这是print的功能

在尝试执行打印命令之前，它没有等待切换完全完成任何人都有任何想法来解决这个问题？感谢。

Answer 1

当您致电each(...)时，您会触发很多异步任务（动画和AJAX调用）。因为它们是异步的，所以JavaScript在完成click处理程序中的其余任务之前不会等待它们完成。

解决方案是计算您必须开始的异步任务数，然后在每次完成时减1。当您达到零时，所有任务都已完成，您可以安全地调用print()，知道所有异步工作都已完成。

免责声明：我没有测试过此代码，但应该可以使用。如果没有，这应该足以让你有正确的想法。

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