ExtJs Animation - Show / Fade элементы до бесконечности

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

Я закончил портирование частей jquery.slideShow Марселем Айхнером , и SO-ответ для выполняет метод для существующего объекта с помощью window.setInterval для моих требований.Код ниже для тех, кто может найти для него применение.Теперь я также передаю анимированные элементы в конструктор, а не только их идентификаторы.

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

Answer 2

Я бы сделал что-то вроде:

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

}

Конечно, я удалил все проверки работоспособности;)