如何在单击时停止 setInterval 函数，并在几秒钟后重新启动

Question

我的自定义滑块有问题：我想在单击下一步/返回按钮时停止 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">&nbsp;</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);   
})

Answer 1

您不能“暂停”一个间隔。您可以取消并重新启动它。

将间隔创建和暂停移动到单独的函数中，这样您就不会重复自己：

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();

Answer 2

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);   
        })