JavaScript / Jquery clearInterval & setInterval 多个滑块
JavaScript / Jquery clearInterval & setInterval multiple sliders
我在一页上有多个滑块,一切正常,只是我无法设置和清除间隔以正常工作。我正在尝试在调用 next 和 prev 函数时重置 setInterval。在我单击 next 或 prev 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 中注释掉新间隔,然后点击下一步按钮,我可以看到 clearInterval 工作。困惑。
在
开头做一个全局的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
将 Module 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.
我在一页上有多个滑块,一切正常,只是我无法设置和清除间隔以正常工作。我正在尝试在调用 next 和 prev 函数时重置 setInterval。在我单击 next 或 prev 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 中注释掉新间隔,然后点击下一步按钮,我可以看到 clearInterval 工作。困惑。
在
开头做一个全局的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
将Module 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.