打印功能不能等待的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();   
}); 

這裏是打印的功能確實

它不等待切換到前全面完成試圖做打印命令任何人有任何想法來解決這個問題？謝謝。

Answer 1

當您撥打each(...)時，您會觸發很多異步任務（動畫和AJAX調用）。因爲它們是異步的，所以JavaScript在完成處理程序中的其餘任務之前不會等待它們完成。

解決的辦法是統計你需要開始的異步任務的數量，然後每完成一次就遞減一次。當你達到零時，所有的任務都完成了，你可以安全地調用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'); 
});