The efficiency and options of my PNG sequence JS class

Question

I have built a JavaScript PNG sequence engine that allows for playing, pausing and stopping and a time change event. I am asking for genuine opinions if the code is actually good. Its ONLY for the iDevice range (not for desktop browsers or anything) and here is the code and a link to the gist if you wanted to edit it for examples.

Hope its as good as I think it is!

/**
 * @param slides ~ Array (ARRAY) of image locations
 * @param duration ~ Number - in milliseconds how long to run for
 * @param element ~ jQuery object - The <img> tag to change the src of.
 * @returns void
 * 
 * @example
 *  <img src="#" id="sequence" data-loop="true" data-autoplay="true" />
 *  <script>var vid = new PNGSequence(tiffanyCrystal, 4, $('#sequence'));</script>
 */
var PNGSequence = function (slides, duration, element) {
    this.slides = slides;
    this.NSlides = slides.length;
    this.duration = duration;
    this.interval = (this.duration * 1000) / this.NSlides;
    this.element = element;
    this.index = 0;
    this.loop = this.element.data('loop') == true;
    this.autoplay = this.element.data('autoplay') == true;

    var inter;

    this.interGo = function () {
        var self = this;
        return setTimeout(function () {
            // Update the image
            element.attr({
                "src": slides[self.index]
            });

            // Increase the index
            self.index++;

            // Call the onTimeChange event
            if (self.hasOwnProperty('onTimeChange')) {
                if (self.onTimeChange) {
                    self.onTimeChange.call(self, self.index, self.NSlides);
                }
            }

            // Check if its the end of the animation
            if (self.index > self.NSlides) {
                // If we're not looping, clear the interval
                if (!self.loop) {
                    clearTimout(inter);
                } else {
                    // If we're looping then start the loop from the beginning 
                    self.index = 0;
                    self.play();
                }
                return;
            }

            //Fire the timeout again
            self.interGo();
        }, this.interval);
    };

    /**
     * Pauses the sequence
     */
    this.pause = function () {
        clearTimout(inter);
        return this.index;
    };

    /**
     * Plays the sequence from last known point
     */
    this.play = function () {
        return inter = this.interGo();
    };

    /**
     * Stops the sequence and sets the pointer
     * at the beginning again
     */
    this.stop = function () {
        clearTimout(inter);
        this.index = 0;
        return 0;
    };

    this.onTimeChange = function () {
        return this;
    };

    if (this.autoplay) {
        inter = this.interGo();
    }

    return this;
};

And here is the link to the gist https://gist.github.com/3360011

Answer 1

I would suggest a few minor changes:

1. Use setTimeout instead of setInterval to ensure that callbacks don't stack up if they can't be serviced on time. This implies re-invoking this.interGo at the end of the callback to re-trigger the timer.

2. Only declare and use self in the functions that need it, to avoid traversing the scope chain unnecessarily.

3. Remove over-reliance on the Number constructor.

Answer 2

Do you expect this to be called multiple times per page? If so, I would consider attaching your functions to the prototype, that way they're not instantiated every time a your object is new'd up.

If this is primarily for use with jQuery, why not bundle it into a plugin? You can still keep your object as it is, just follow the kind of pattern used by twitter in the bootstrap plugins. Off the top of my head, something like this perhaps?

$.fn.pngSequence = function(options) {
    return this.each(function() {
        var $this = $(this),
            sequence = new PNGSequence(options.slides, options.duration, $this);

        //i like storuing the instance in the data collection
        //so consumer can interact with it later
        $this.data("pngSequence", sequence);

    });
};

Which could then be utilised as so. Note that it's hooked in declaratively using a data-* attribute :)

$("img[data-provider='pngSequence']").pngSequence({
    slides : tiffanyCrystal,
    duration : 4
});