Call a function init and when Isotope finishes and then reset on next run

问题

I'm looking to run a function before/on init and then as soon Isotope finishes animating and then as soon as isotope is triggered again to reset the function so that it reflects the new layout 'onLayout'. The following code will run when Isotope finishes, but it keeps and multiplies out the function multiple times which is not what I'm looking for:-

$(".grid").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
 // the function
$('.2017').wrapAll( '<div class="year2017"></div>' );
$('.year2017').before('<div class="yeardiv"><h2>2017</h2></div>');

});
// bind event listener
$isotope.isotope( 'on', 'layoutComplete', onLayout );    

So basically it's not resetting keeps duplicating it out (so in this case multiple 'yeardiv's), but what I want is it only to run on init and once Isotope has finished its layouts so that it repeatedly correctly groups divs with the same year class once isotope has finished.

Make sense?

Thanks Glennyboy

回答1:

I don't think the problem is with what's INSIDE the event handler. The problem is that the event(s) transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd are being raised multiple times, causing the code inside the handler to execute multiple times. I have never used these events before, so I can't tell you why.

I have not worked with isotope too, but you may want to try their onArrange event. More about the event here. This event is raised once the filtered divs are arranged on the UI.

So you may try:

$(".grid").on( 'arrangeComplete', function( event, filteredItems ) {
    $('.2017').wrapAll( '<div class="year2017"></div>' );
    $('.year2017').before('<div class="yeardiv"><h2>2017</h2></div>');

});

来源：https://stackoverflow.com/questions/44685217/call-a-function-init-and-when-isotope-finishes-and-then-reset-on-next-run