javascript - 设置和清除间隔变成多个间隔

Question

我正在尝试开发一个 slider ，如果用户没有按下后退或前进按钮，它每 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

添加 wrStoppTimer()在wrStartTimer开头调用:

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

也在两个click你拥有的功能:

        wrStoppTimer();
        wrStartTimer();

你可以删除那个wrStoppTimer()自 wrStartTimer() 起调用现在会为您调用它。

另一件事:如果您按照使用 var name = function() { ... } 的方式定义函数你应该在结束后加一个分号 }如上面更新的代码。