使用 mootools 1.4.1 的代码会导致无限循环答案

【问题标题】：code using mootools 1.4.1 causes an infinite loop使用 mootools 1.4.1 的代码会导致无限循环
【发布时间】：2011-10-27 00:50:49
【问题描述】：

我正在使用 mootools 1.4.1，我正在尝试获取一个 div 来“补间”屏幕宽度，以便在完成时触发另一个功能。但是，补间一直在触发，我不相信它会触发我想要的功能。

代码如下：

$('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);
                                                   }    
                                                 }
                           });

我们将不胜感激。

@Dimitar Christoff，这是 nextPhoto 函数的代码：

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

} // FUNCTION nextPhoto 结束

【问题讨论】：

这段代码确实没有显示任何递归，除非 nextPhoto 调用相同的代码，这会导致 onComplete 再次触发。你能显示更多吗，拜托。否则，您可以尝试对 onComplete 使用伪 :once 事件，例如。 element.get("tween").addEvent("complete:once", fn)
@Dimitar Christoff，这是 nextPhoto 的代码。它确实调用了上面代码嵌入的函数loadingPhotos，但现在被注释掉了，它仍然重复。

标签： mootools mootools-fx

【解决方案1】：

由于我在您的代码中没有看到明显的循环，我怀疑该效果是由

link: 'cancel'

在您的第一个代码块中。根据 Moo 文档，这将：

'cancel' - 在效果运行时对 start 的任何调用都将优先于当前运行的转换。新的过渡将立即开始，取消当前正在运行的过渡。

所以这可能会让你的青少年感到不安。但是，您可能是故意添加的。我会尝试在您的第一个和第二个补间设置中将其更改为 chain 或 ignore，以查看最佳组合。如果这不能解决它，也许您可以发布更多代码。例如，我看不到 resetTimeline 函数的代码。也许你的代码卡在这里了。

【讨论】：