JavaScript / Jquery clearInterval & setInterval多个滑块
JavaScript / Jquery clearInterval & setInterval多个滑块
提问于 2018-07-26 21:54:46
我有多个滑块在一个页面上，所有的工作，除了我不能得到设置和清除间隔正常工作。我正在尝试在调用next和prev函数时重置setInterval。在我点击下一步或上一步clearInterval后，滑块都停止了，但当新的setInterval运行时，奇怪的事情发生了。
理想情况下，我希望为页面上的每个滑块执行此操作，但我甚至不能全局地让它工作(这意味着一次重置页面上的所有滑块)。
感谢您的反馈！
编辑:我在实际代码下面粘贴了一个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内部的新间隔，然后点击next按钮，我可以看到clearInterval工作。迷惑了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-26 22:04:04
在开始时创建全局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/
更改：
- 使用全局参数对您的代码应用了参数；
- 删除了此行中的所有参数
timer：
JavaScript模块是最常用的设计模式，用于保持特定代码段独立于其他组件。这提供了松散耦合来支持结构良好的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51540582
复制相关文章
相似问题