调用函数init，当同位素完成时，然后在下次运行时重置 [英] Call a function init and when Isotope finishes and then reset on next run

问题描述

我希望在init之前/之前运行一个函数，然后同位素完成动画处理，然后立即再次触发同位素以重置该函数，以使其反映新的布局"onLayout".当同位素完成时，以下代码将运行，但是它将多次保留并乘以该函数，这不是我想要的:-

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

所以基本上它不是在重置中一直重复复制它(所以在这种情况下是多个'yeardiv's)，但是我想要的是它只能在init上运行，并且一旦同位素完成布局，以便它可以重复地正确地将div与相同的分组同位素完成后的一年级.

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.

有道理吗?

谢谢 格兰尼男孩

推荐答案

我不认为问题出在事件处理程序内部.问题在于事件transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd被多次引发，导致处理程序中的代码多次执行.我以前从未使用过这些事件，所以我无法告诉您原因.

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.

我也没有使用isotope，但是您可能想尝试他们的onArrange事件.有关事件的更多信息，请此处.一旦将经过过滤的divs安排在用户界面上，就会引发此事件.

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.

因此您可以尝试:

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

});

这篇关于调用函数init，当同位素完成时，然后在下次运行时重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！