Set and Clear Interval turns into multiple Interval

Question

I am trying to develope a slider, which change every 5 seconds if the user doens´t hit the back- or forward-button.

But if he (the user) does, the interval fires multiple times... why?

I save the Interval in a variable and clear this variable so i don´t know why this dont work... but see yourself:

        jQuery.fn.extend({
wrGallery: function() {
    return this.each(function() {

        //  config
        var wrClassActive = 'galerie_active';
        var wrTime = 5000;
        //  wrAutomaticDirection gibt an, in welche Richtung 
        //  die Gallerie bei automatischem Wechsel wechseln soll (True = vorwärts/rechts)
        var wrAutomaticDirection = true;

        var wr = jQuery(this);
        var wrGalleryContents = wr.find('.galerie_content');
        var wrGalleryContentsFirst = wr.find('.galerie_content:first-child');
        var wrBtnBack = wr.find('#galerie_backward');
        var wrBtnFor = wr.find('#galerie_forward');
        var wrTimer = 0;
        var wrI = 0;
        var wrOldActiveID = 0;

        var wrInit = function() {
            wrGalleryContents.each(function() {
                wrI++;
                jQuery(this).attr('id', wrI);
                jQuery(this).css({
                    display: 'none',
                    opacity: 0
                })
            })

            wrGalleryContentsFirst.css({
                display: 'block',
                opacity: 1
            })
            wrGalleryContentsFirst.addClass('galerie_active')
            wrStartTimer();
        }

        var wrStartTimer = function() {
            wrTimer = setInterval(function() {
                wrChange(wrAutomaticDirection);
            }, wrTime)
        }

        var wrStoppTimer = function() {
            clearInterval(wrTimer);
            wrTimer = 0;
        }

        var wrBackground = function(wrDirection) {
            wrOldActiveID = wr.find('.' + wrClassActive).attr('id');
            wr.find('.' + wrClassActive).removeClass(wrClassActive);

            if (wrDirection) {
                wrOldActiveID++;
                if (wrOldActiveID <= wrI) {
                    wr.find('#' + wrOldActiveID).addClass(wrClassActive);
                } else {
                    wr.find('#1').addClass(wrClassActive);
                }
            } else {
                wrOldActiveID--;
                if (wrOldActiveID <= wrI) {
                    wr.find('#' + wrOldActiveID).addClass(wrClassActive);
                } else {
                    wr.find('#3').addClass(wrClassActive);
                }
            }
        }

        var wrAnimate = function(wrDirection) {
            wrGalleryContents.stop().animate({
                opacity: 0
            }, 500);
            wr.find('.' + wrClassActive).css({
                display: 'block'
            })
            wr.find('.' + wrClassActive).stop().animate({
                opacity: 1
            }, 500);

        }

        var wrChange = function(wrDirection) {
            wrBackground(wrDirection);
            wrAnimate(wrDirection);

        }

        wr.on('mouseenter', function() {
            wrStoppTimer();
        });

        wr.on('mouseleave', function() {
            wrStartTimer();
        });

        wrBtnBack.on('click', function() {
            wrStoppTimer();
            wrStartTimer();
            wrChange(false);
        });

        wrBtnFor.on('click', function() {
            wrStoppTimer();
            wrStartTimer();
            wrChange(true);
        });


        wrInit();

    });
}

});

Thanks for reading ;-)

Answer 1

Add a wrStoppTimer() call at the beginning of wrStartTimer:

    var wrStartTimer = function() {
        wrStoppTimer();
        wrTimer = setInterval(function() {
            wrChange(wrAutomaticDirection);
        }, wrTime)
    };

Also in the two click functions you have:

        wrStoppTimer();
        wrStartTimer();

you can remove that wrStoppTimer() call since wrStartTimer() will call it for you now.

One other thing: if you define functions the way you're doing with var name = function() { ... } you should put a semicolon after the closing } as in the updated code above.