[英]setInterval function in javascript stops executing after a few seconds
[英]How to stop a setInterval function on click, and restart after a few seconds
我的自定义滑块中存在一个问题:我想在单击“下一步” /“后退”按钮时停止setInterval
事件,然后在3秒钟后重新启动。
滑块: http : //karanbhilware.com/mail_send/slider.html
间隔代码如下。
HTML:
<div class="slider">
<div id="sliderUL"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> </div>
</div>
<div style="clear:both"> </div>
<div id="sliderNav">
<button id="back" data-file="previous" style="float:left; margin-left:50px;">previous</button>
<button id="next" data-file="next" style="float:right; margin-right:50px;">Next</button>
</div>
JavaScript:
var sliderWrap = $('#sliderUL'),
img = $('#sliderUL img')
singleWidth = sliderWrap.find('img:first-child').width(),
imageLenght = img.length,
idCount = 1,
current = 1,
firstImage = img.first();
lastImage = img.last(),
secondLast = imageLenght-1;
secondImage = img.eq(1);
firstImage.addClass('active');
img.each(function(){
$(this).attr('id','slider_'+idCount++);
});
if(current === 1){
$('#back').addClass('none');
}
$('#next').on('click',nextFun);
$('#back').on('click',backFun);
function backFun(){
if(current === imageLenght){
$('#next').removeClass('none');
}
if(current === 2){
$(this).addClass('none');
}
var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
current--;
}
function nextFun(){
var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
current++;
if(current === 2){
$('#back').removeClass('none');
}
if(current === imageLenght){
$('#next').addClass('none');
}
}
var mode = 'Next';
function autRotatae(){
if(current == imageLenght)
mode = 'Back';
if(current == 1)
mode = 'Next';
if(mode == 'Next')
{
nextFun();
}
else
backFun();
}
$(document).ready(function(){
setInterval(autRotatae,2000);
})
您不能“暂停”间隔。 您可以取消并重新启动它。
将时间间隔的创建和暂停移至单独的功能,因此您无需重复自己的操作:
var rotateInt = null;
$(document).ready(function(){
startRotate();
})
function startRotate() {
if (! rotateInt)
rotateInt = setInterval(autRotatae, 2000);
}
function pauseRotate() {
if (rotateInt)
{
clearInterval( rotateInt );
rotateInt = null;
setTimeout( startRotate, 3000 );
}
}
然后,在您的下一个/上一个按钮处理程序中:
pauseRotate();
var timer;
var sliderWrap = $('#sliderUL'),
img = $('#sliderUL img')
singleWidth = sliderWrap.find('img:first-child').width(),
imageLenght = img.length,
idCount = 1,
current = 1,
firstImage = img.first();
lastImage = img.last(),
secondLast = imageLenght-1;
secondImage = img.eq(1);
firstImage.addClass('active');
img.each(function(){
$(this).attr('id','slider_'+idCount++);
});
if(current === 1){
$('#back').addClass('none');
}
$('#next').on('click',nextFun);
$('#back').on('click',backFun);
function backFun(){
clearInterval(timer);
setTimeout(function(){ timer = setInterval(autRotatae,2000);},3000);
if(current === imageLenght){
$('#next').removeClass('none');
}
if(current === 2){
$(this).addClass('none');
}
var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
current--;
}
function nextFun(){
clearInterval(timer);
setTimeout(function(){ timer = setInterval(autRotatae,2000); },3000);
var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
current++;
if(current === 2){
$('#back').removeClass('none');
}
if(current === imageLenght){
$('#next').addClass('none');
}
}
var mode = 'Next';
function autRotatae(){
if(current == imageLenght)
mode = 'Back';
if(current == 1)
mode = 'Next';
if(mode == 'Next')
{
nextFun();
}
else
backFun();
}
$(document).ready(function(){
timer = setInterval(autRotatae,2000);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.