Функция печати для jquery не ждет завершения слайд-тумблера - PullRequest
Новая
       16

Функция печати для jquery не ждет завершения слайд-тумблера

1 голос
/ 07 апреля 2011

Вот код 

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

вот что делает функция печати

example of what it does

Он не ждет полного завершения переключения, прежде чем пытаться выполнить команду печати, у кого-нибудь есть идеи, чтобы это исправить ?? Спасибо.

1 Ответ

2 голосов
/ 07 апреля 2011

У вас много асинхронных задач (анимация и вызовы AJAX), запускаемых при вызове 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');
});
...