设置和清除间隔变为多个间隔

Question

我正在尝试开发一个滑块，如果用户没有点击后退或前进按钮，它每5秒就会改变一次。

但是如果他（用户）这样做了，间隔会触发多次。。。为什么？

我将间隔保存在一个变量中，并清除该变量，因此我不知道为什么这不起作用。。。但是看看你自己：

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

    });
}

});

感谢阅读；-）

Answer 1

在wrStartTimer的开头添加一个wrStoppTimer（）调用：

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

在两个单击函数中，您还可以使用：

        wrStoppTimer();
        wrStartTimer();

您可以删除该wrStoppTimer（）调用，因为wrStartTimer（）现在将为您调用它。

还有一件事：如果您像使用var name=函数（）{...}一样定义函数，您应该在结尾的}后面放一个分号，就像上面更新的代码一样。