code using mootools 1.4.1 causes an infinite loop

Question

I'm using mootools 1.4.1 and I'm trying to get a div that 'tweens' the width of the screen to fire another function on completion. However, the tween keeps firing and I don't believe that it's firing the function I'm wanting it to.

The code is below:

$('photo-loading_amt').set('tween', {duration: '1000ms',
                                     link: 'cancel',
                                     transition: 'linear',
                                     property: 'width',
                                     onComplete: function() {
                                                   var photoContainers = $$('.photo-container')

                                                   if (photoNum != photoContainers.length)  {
                                                       nextPhoto(photoNum.toInt() + 1);
                                                   }
                                                   else {
                                                       nextPhoto(1);
                                                   }    
                                                 }
                           });

Any Help that you might have would be appreciated.

@Dimitar Christoff, here's the code for the nextPhoto function:

function nextPhoto(photoNum)    {
resetTimeline();

var photoContainers = new Array();

photoContainers = $$('.photo-container');

var photoFx = new Fx.Tween(photoContainers[photoNum.toInt() - 1], {
                                duration: 'normal',
                                transition: Fx.Transitions.Sine.easeOut,
                                property: 'opacity',

                                onComplete: function() {
                                                            photoContainers[photoNum.toInt() - 1].setStyle('visibility', 'hidden');
                                                            photoContainers[photoNum.toInt() - 1].setStyle('opacity', 1);

                                                            if (photoNum == photoContainers.length) {
                                                                photoContainers[0].setStyle('z-index', photoContainers.length);
                                                            }
                                                        }
                            });

if (photoNum == photoContainers.length) {
    photoContainers[0].setStyle('z-index', 0);
}

photoFx.tween(1, 0);
//alert("photoNum = " + photoNum + "\n" + "photoContainers.length = " + photoContainers.length);
if (photoNum == photoContainers.length) {
    photoContainers[0].setStyle('visibility', 'visible');       
}
else    {
    photoContainers[photoNum.toInt()].setStyle('visibility', 'visible');
    //loadingPhotos(photoNum.toInt() + 1);
}
// hard reset the loadingPhotos function

} // end of FUNCTION nextPhoto

this code really does not show any recursion, unless the nextPhoto calls the same code, which would cause the onComplete to fire again. can you show more, please. otherwise, you can try to use the pseudo :once event for onComplete, eg. `element.get("tween").addEvent("complete:once", fn)` — Dimitar Christoff, Oct 27 '11 at 08:07
@Dimitar Christoff, here's the code for nextPhoto. It _does_ call loadingPhotos, the function that the above code is embedded in, but it was commented out at the moment and it still repeated. — forgivenphoenix, Oct 27 '11 at 22:22

score 0 · Accepted Answer · answered Oct 28 '11 at 07:53

Since I don't see an apparent loop in your code, I would suspect the effect to be caused by

link: 'cancel'

in your first block of code. According to the Moo docs this will:

'cancel' - Any calls made to start while the effect is running will take precedence over the currently running transition. The new transition will start immediately, canceling the one that is currently running.

So this might upset your tweens. However, you probably added this deliberately. I would try changing this to chain or ignore, both in your first and second tween setup, to see what combines best. If this doesn't solve it, perhaps you could post some more code. For instance, I don't see the code for the resetTimeline function. Perhaps your code gets stuck here.

code using mootools 1.4.1 causes an infinite loop

1 Answers1