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的工作。困惑。
在
的开头创建全局
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 .... } })(); |
并删除
我不理解开头的代码:
1 2 3 | gemco.customSlider = gemco.customSlider || {}; gemco.customSlider = {//the first row make sure customSlider is not empty, but here overwrites the first row.... |
更多说明:
原因是您的
此代码有效:https://jsfiddle.net/z1kg8qdt/29/
更改:
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.