ExtJs Animation - Show/Fade Elements Ad Infinitum

I'm trying to create a never-ending looping animation using ExtJs, but am hitting the obvious barrier - calling a function recursively that potentially never ends tends to fill the

Solution 1:

I ended up porting parts of jquery.slideShow by Marcel Eichner, and the SO answer for execute a method on an existing object with window.setInterval for my requirements. Code below for any who might find a use for it. I also now pass the elements to be animated into the constructor, rather than just their IDs.

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

Solution 2:

I would do something like :

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

}

Of course I removed all sanity checks ;)