JavaScript / Jquery clearInterval & setInterval 多个滑块

Question

我在一页上有多个滑块，一切正常，除了我无法让设置和清除间隔正常工作。我试图在调用 next 和 prev 函数时重置 setInterval。在我单击下一个或上一个 clearInterval 工作后，滑块都停止了，但是当新的 setInterval 运行时会发生奇怪的事情。

理想情况下，我希望对页面上的每个滑块都执行此操作，但我什至无法在全局范围内使其工作（意味着一次重置页面上的所有滑块）。

感谢您的任何反馈！

编辑：Including JSFiddle

编辑：我在实际代码下方粘贴了一个 JS 布局示例

gemco.customSlider = gemco.customSlider || {};

gemco.customSlider = {

nextSlide: function(el, timer){     
    // Set Active Slide
    var parentSlide = el.parent('section');
    var totalSlides = parentSlide.find($('.cs-slide')).length;
    var activeSlide = parentSlide.find($('.cs-slide.active')); 
    var curSlide = activeSlide.data('tab');
    var nextSlideIndex = curSlide + 1;
    if(nextSlideIndex > totalSlides){
        nextSlideIndex = 1;
    }
    var nextSlide = parentSlide.find($('.cs-slide[data-tab="' + nextSlideIndex + '"]'));

    activeSlide.removeClass('active');
    nextSlide.addClass('active');

    // Reset Timer
    gemco.customSlider.resetTimer(timer);
},

prevSlide: function(el, timer){     
    // <Similar to nextSlide>
},

playSlider: function(){
    $('.custom-slider').each(function(){
        var el = $(this).find('.cs-slide.active');
        var parentSlide = el.parents('.custom-slider');
        var totalSlides = parentSlide.find($('.cs-slide')).length;
        var activeSlide = parentSlide.find($('.cs-slide.active')); 
        var curSlide = activeSlide.data('tab');
        var nextSlideIndex = curSlide + 1;
        if(nextSlideIndex > totalSlides){
            nextSlideIndex = 1;
        }
        var nextSlide = parentSlide.find($('.cs-slide[data-tab="' + nextSlideIndex + '"]'));

        activeSlide.removeClass('active');
        nextSlide.addClass('active');

        // Set Active Tab Link
        gemco.customSlider.setActiveTabLink();
    }); 

},

resetTimer: function(timer){
    clearInterval(timer);
    var timer = setInterval(function(){
        gemco.customSlider.playSlider();
    }, 7000);   
},

init: function(){

    var timer = setInterval(function(){
        gemco.customSlider.playSlider();
    }, 7000);   

    $('.cs-next-prev.next').click(function(e){
        timer = timer;
        el = $(this); 
        e.preventDefault();
        gemco.customSlider.nextSlide(el, timer);
    });

    $('.cs-next-prev.prev').click(function(e){
        // <Similar to Above>
    });
}

} // gemco.customSlider 

这里是一个 JS 整体布局的示例

var obj = obj || {};

obj.customSlider = obj.customSlider || {};
obj.customSlider = {
    nextSlide: function(){      
        // ...
    },

    prevSlide: function(){      
        // ...
    },

    playSlider: function(){
        // ...      
    },

    resetTimer: function(){
        // ...  
    },

    init: function(){
        // Init Functions
    }   
},

obj.sample = obj.sample || {};
obj.sample = {
    init: function() {
        // ...
    }
} 

$(document).ready(function(){
    obj.customSlider.init();
    obj.sample.init();
});

问题示例 - JSFiddle - 点击下一个箭头几次，就像每次都在创建新的计时器？？？如果我在 resetTImer 中注释掉新的间隔，然后点击下一个按钮，我可以看到 clearInterval 工作。困惑。

Answer 1

在开头创建一个全局timer

gemco.customSlider = (function(){
   var timer;// all functions use this timer only, no more others
   var resetTimer=function(){...};
   var setActiveTabLink=function(){...};
   ....
   return {
    Init: C,//map functions..
    Next: B,
    setActiveTabLink: setActiveTabLink
    ....
   }
})();

并删除resetTimer 和init 中的var。

而且我看不懂开头的代码：

gemco.customSlider = gemco.customSlider || {};

gemco.customSlider = {//the first row make sure customSlider is not empty, but here overwrites the first row....

更多解释： 原因是你的timer 没有被清除，它一直在后台工作。

此代码有效：https://jsfiddle.net/z1kg8qdt/29/

变化：

1. 使用全局timer 将Module Design Pattern 应用于您的代码；
2. 删除了所有函数中的参数timer；
3. 删除了这一行：gemco.customSlider = gemco.customSlider || {};

JavaScript 模块是 最普遍使用的设计模式 保持特定代码片段独立于其他组件。 这提供了松散耦合以支持结构良好的代码。