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

发布于 2024-10-31 05:05:15 字数 1100 浏览 6 评论 0原文

这里的代码

    $('#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 函数的作用

它的作用示例

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

原文

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

example of what it 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┼── 2024-11-07 05:05:15

当您调用 each(...) 时，会触发大量异步任务（动画和 AJAX 调用）。由于它们是异步的，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');
});

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

回复收藏 0 原文

~没有更多了~