自定义jQuery插件可能的变量问题

Question

创建我自己的jQuery插件来处理图像序列。当只有一个图像序列在进行时，一切都很完美。但是，当我一次在页面上有2个图像序列时（两个都有无限循环），2个图像序列中较小的一个过早停止。它到达它的第二个循环并始终停在第34帧（38个中）。我认为这可能是第二个序列从第一个序列中获取的问题，但我不确定。一切都很顺利，所以我不确定。以下是下面的代码，如果可以接受的话，很抱歉。

(function ( $ ) {

    $.fn.createSequence = function( sequence ) {
        var container = this;
        var dir = sequence.dir;
        var name = sequence.name;
        var extension = sequence.extension;
        var start = sequence.start;
        var end = sequence.end;
        var fps = 1000 / sequence.fps;
        var trailing = sequence.trailing || true;
        var digits = sequence.digits;
        var loopType = sequence.loopType || 'none';
        var loopAmount = sequence.loopAmount || 'infinite';
        this.currentLoop = 0;
        var zeroes = '';
        var reverse = false;

        // Prepare current frame using starting frame
        var currentFrame = start;

        // Function for adding trailing zeroes
        function calcTrailing(amount){
            zeroes = '';
            for ( i = 0; i < amount; i++ ) {
                zeroes = zeroes + '0';
            }
        }

        // Prepare zeroes variable based on number of digits
        if (trailing) {
            calcTrailing(digits);
        }

        // Build full source
        var fullSource = dir + name + zeroes + extension;

        // Append first frame to container
        container.append('<img src="' + fullSource + '" />');

        // Put added img element into variable for use
        var imgElement = container.children('img');

        // Change img src
        function changeSrc(frameNumber) {
            fullSource = dir + name + zeroes + frameNumber + extension;
            imgElement.attr('src', fullSource);
        }

        // Go to next frame
        function nextFrame() {
            if (reverse) {
                if (currentFrame == start) {
                    ++this.currentLoop;
                    reverse = false;
                    clearInterval(animation);
                    restartAnimation();
                } else {
                    --currentFrame;
                }
            } else {
                ++currentFrame;
            }
            if ( currentFrame > end ) {
                if ( loopType == 'none' ) {
                    clearInterval(animation);
                } else if ( loopType == 'restart' ) {
                    ++this.currentLoop;
                    if ( loopAmount == 'infinite' || this.currentLoop < loopAmount ) {
                        currentFrame = start;
                    }
                } else if ( loopType == 'reverse' ) {
                    reverse = true;
                    --currentFrame;
                }
            } else if ( currentFrame < 10 ) {
                calcTrailing(digits - 1);
                changeSrc(currentFrame);
            } else if ( currentFrame < 100 ) {
                calcTrailing(digits - 2);
                changeSrc(currentFrame);
            }
        }

        // Start the image sequence
        function animateSequence() {
            animation = setInterval(nextFrame, fps);
        }

        // Restart animation
        function restartAnimation() {
            if ( loopAmount == 'infinite' || this.currentLoop < loopAmount ) {
                animation = setInterval(nextFrame, fps);
            }
        }

        animateSequence();
    }
}( jQuery ));