Javascript ExtJs动画-无限显示/淡入元素

我试图使用ExtJs创建一个永无止境的循环动画，但我遇到了明显的障碍——递归调用一个可能永无止境的函数往往会很快填满堆栈。我的（不工作）代码如下；此函数获得一个字符串数组，该数组对应于要显示和隐藏的div。如果没有回调，代码将产生所需的显示/淡入淡出效果，但显然只有一次

// 'divArray' - a string array containing the IDs of the divs to cycle.
function cycleDivs (divArray) {
    var len, i, el;

    // Sanity check.
    if (divArray === null || !Ext.isArray(divArray) || divArray.length === 0) {
        return;
    }

    // Get the length of the array; we'll need this to loop the animation.
    len = divArray.length;

    for (i = 0; i < len; i++) {
        // Get the element.
        el = Ext.fly(divArray[i]);
        // Sanity check.
        if (el) {
            el.sequenceFx();
            el.fadeIn({
                endOpacity: 1,
                easing: 'easeOut',
                duration: 3
            });
            el.pause(2)
            el.fadeOut({
                endOpacity: 0,
                easing: 'easeOut',
                duration: 3
            });

            if (i === len - 1) {
                // Recursive call if this is the last element in the array.
                el.callback = cycleDivs(divArray);
            }
        }
    }
}

/“divArray”-包含要循环的div的id的字符串数组。
函数cycleDivs（divArray）{
var len，i，el；
//精神检查。
if（divArray==null | | |！Ext.isArray（divArray）| | divArray.length==0）{
返回；
}
//获取数组的长度；我们需要它来循环动画。
len=divArray.length；
对于（i=0；i

警告：我以前使用jQuery及其各种各样的插件实现过这种效果，但由于它是一个工作项目，我只能使用我拥有的库，即ExtJs

---

提前感谢您的指点。

我会做如下事情：

var cycleDivs = function(divs) {

   var i = 0;

   var fadeFn = function() {
      divs[i].sequenceFx().fadeIn({
         ...
      }).pause(2).fadeOut({
         ...,
         callback : fadeFn
      });
      i = (i+1)%divs.length;
   }

   fadeFn();

}

---

当然，我删除了所有的健康检查；）

我最终移植了jquery.slideShow的一部分，以及我的需求的答案。下面的代码为任何可能找到它用途的人编写。我现在还将要设置动画的元素传递到构造函数中，而不仅仅是它们的ID

// Constructor function.
MyNamepsace.Slideshow = function (divArray) {

    // Persist the div array.
    this.divArray = divArray;

    // Internal vars
    this.numSlides = this.divArray.length;

    this.current = 0;

    if (this.current >= this.numSlides) {
        this.current = this.numSlides - 1;
    }

    this.last = false;
    this.interval = false;
};

Ext.apply(MyNamespace.Slideshow.prototype, {

    // Initialisation method.
    init: function() {
        this.gotoSlide(this.current);
        this.auto();
    },

    // This is a "toy" version of "bind".
    bind: function(object, method) {
        return function() {
            method.call(object);
        };
    },

    // Set up automatic slideshow.
    auto: function() {      
        this.interval = window.setInterval(this.bind(this, this.next), 3000);
    },

    // Stop automatic slideshow.
    stopAuto: function() {
        if (this.interval) {
            window.clearInterval(this.interval);
            this.interval = false;
        }
    },

    // Go to next slide.
    next: function() {
        this.gotoSlide(this.current + 1);
    },

    // Go to specific slide.            
    gotoSlide: function(index) {
        var oldSlide, newSlide;

        if (index < 0) {
            index = this.numSlides - 1;
        }

        if (index >= this.numSlides) {
            index = 0;
        }

        if (index === this.current) { 
            return;
        }

        // get slide elements
        oldSlide = this.divArray[this.current];
        newSlide = this.divArray[index];

        this.stopAuto();

        // Start transition
        oldSlide.fadeOut({
            easing: 'easeOut',
            duration: 3,
            callback: this.auto,
            useDisplay: true,
            scope: this
        });

        newSlide.fadeIn({
            easing: 'easeIn',
            duration: 3
        });

        this.last = this.current;
        this.current = index;
    }
});

//构造函数。
MyNamepsace.Slideshow=函数（divArray）{
//持久化div数组。
this.divArray=divArray；
//内变
this.numSlides=this.divArray.length；
该电流=0；
如果（this.current>=this.numSlides）{
this.current=this.numSlides-1；
}
this.last=false；
这个时间间隔=假；
};
Ext.apply（MyNamespace.Slideshow.prototype{
//初始化方法。
init:function（）{
this.gotoSlide（this.current）；
这个。auto（）；
},
//这是“绑定”的“玩具”版本。
绑定：函数（对象、方法）{
返回函数（）{
方法调用（对象）；
};
},
//设置自动幻灯片放映。
自动：函数（）{
this.interval=window.setInterval（this.bind（this，this.next），3000）；
},
//停止自动幻灯片放映。
stopAuto:function（）{
如果（此时间间隔）{
window.clearInterval（this.interval）；
这个时间间隔=假；
}
},
//转到下一张幻灯片。
下一步：函数（）{
this.gotoSlide（this.current+1）；
},
//转到特定幻灯片。
gotoSlide:函数（索引）{
var Oldsiled、newSlide；
如果（指数<0）{
index=this.numSlides-1；
}
如果（索引>=this.numSlides）{
指数=0；
}
如果（索引===this.current）{
返回；
}
//获取幻灯片元素
oldsile=this.divArray[this.current]；
newSlide=this.divArray[index]；
这个.stopAuto（）；
//开始过渡
衰减({
放松：“放松”，
持续时间：3，
回调：this.auto，
useDisplay：对，
范围：本
});
法登新闻({
放松：“放松”，
持续时间：3
});
this.last=this.current；
这个。当前=指数；
}
});

谢谢您的建议；今天早上我尝试了一下，但运气不好，所以我现在将jQuery幻灯片移植到ExtJs。完成后将发布。