Question

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

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

我将Interval保存在变量中并清除此变量，所以我不知道为什么这不起作用......但是看看你自己：

        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() { ... }的方式定义函数，你应该在结束}之后加上一个分号，就像上面的更新代码一样。

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

1 个答案: