如何在所有轉換完成後調用`callback`函數？

Question

我想在我的transition結束後致電我的callback。但我沒有得到。每個transition結束時的回調時間。如何將所有這些結合起來並在最後撥打電話？

這裏是我的代碼：

var fadeHandler = function() { 
    var myCallback = function() { 
    $.event.trigger('showMenu'); 
    //this is called 6 times 
    // how to get single time call back after completing all 6 transitions? 
    } 

    d3.selectAll('.subAppGroup .subAppPath, .subAppGroup .subAppGroupDetail') //parent group 6 no.s 
    .transition() 
    .delay(function(d, i) { 
     return i * 500; 
    }) 
    .duration(500) 
    .style('opacity', 1) 
    .each("end", myCallback); //this is called 6 times 

} 
fadeHandler(); 

Answer 1

我不知道這是否是解決這個問題的最好辦法，但它確實工作。

var fadeHandler = function() { 
 
    var items = d3.selectAll('.subAppGroup .subAppPath, .subAppGroup .subAppGroupDetail'), 
 
     todo = items.size(); 
 
    
 
    items 
 
    .transition() 
 
    .delay(function (d, i) { 
 
     return i * 500; 
 
    }) 
 
    .duration(500) 
 
    .style('opacity', 1) 
 
    .each("end", function() { 
 
     todo--; 
 
     if (todo === 0) { 
 
      // $.event.trigger('showMenu'); 
 
      $("#allDone").fadeIn(); 
 
     } 
 
    }); 
 
}; 
 

 
fadeHandler();

.subAppGroup * { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    opacity: 0.2; 
 
    margin: 4px; 
 
} 
 
.subAppPath { 
 
    background-color: red; 
 
} 
 
.subAppGroupDetail { 
 
    background-color: blue; 
 
} 
 
#allDone { 
 
    display: none; 
 
    clear: both; 
 
    margin: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class="subAppGroup"> 
 
    <div class="subAppPath"></div> 
 
    <div class="subAppGroupDetail"></div> 
 
    <div class="subAppPath"></div> 
 
    <div class="subAppGroupDetail"></div> 
 
    <div class="subAppPath"></div> 
 
    <div class="subAppGroupDetail"></div> 
 
</div> 
 
<div id="allDone">All done!</div>