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

Question

我正在尝试使用 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);
            }
        }
    }
}

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

在此先感谢您的指点。

Answer 1

我最终通过 Marcel Eichner 移植了部分 jquery.slideShow| ，以及 execute a method on an existing object with window.setInterval 的 SO 答案对于我的要求。下面的代码适用于任何可能发现它的用途的人。我现在还将要动画化的元素传递给构造函数，而不仅仅是它们的 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;
    }
});