JavaScript / jQuery clearInterval

JavaScript / Jquery clearInterval & setInterval multiple sliders

我在一页上有多个滑块,除我无法设置并清除间隔以正常工作外,其他所有功能均正常。我正在尝试在调用next和prev函数时重置setInterval。我单击next或prev后,clearInterval起作用,滑块全部停止,但是在运行新的setInterval时会发生怪异的事情。

理想情况下,我想为页面上的每个滑块执行此操作,但我什至无法全局使它正常工作(这意味着立即重置页面上的所有滑块)。

感谢您的任何反馈!

编辑:包括JSFiddle

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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总体布局的示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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的工作。困惑。


的开头创建全局timer

1
2
3
4
5
6
7
8
9
10
11
12
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
    ....
   }
})();

并删除resetTimerinit中的var

我不理解开头的代码:

1
2
3
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/

更改:

  • 使用全局timerModule Design Pattern应用于您的代码;
  • 删除所有功能中的参数timer
  • 删除此行:gemco.customSlider = gemco.customSlider || {};
  • JavaScript modules are the most prevalently used design patterns for
    keeping particular pieces of code independent of other components.
    This provides loose coupling to support well-structured code.