jquery - 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(...). 因为它们是异步的，所以 JavaScript 不会在完成click处理程序中的其余任务之前等待它们完成。

解决方案是计算您必须开始执行多少异步任务，然后每完成一个任务就减一。当您达到零时，所有任务都已完成，您可以在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');
});