启动和停止 setInterval 的问题答案

【问题标题】：Troubles starting and stopping setInterval启动和停止 setInterval 的问题
【发布时间】：2013-12-01 23:55:09
【问题描述】：

我正在尝试使用setInterval 来启动、停止和重新启动定时滑块。滑块 1) 淡出/淡入幻灯片，2) 转换滑块底部的寻呼机按钮。我的代码如下：

var sliderEl = $('div.slider-container'),
    pagerNav = $('div.slider-container div.pager-container nav.pager'),
    slidePosition = 1,
    slideCount = sliderEl.find('img.slide').length,
    sliderInt;

var slider = function(status){
    var nextSlide = function(){
        pagerNav.find('button.slide-select').removeClass('selected');
        sliderEl.find('div.slides div.slide').fadeOut(300);
        if(slidePosition === slideCount){
            pagerNav.find('button.slide-select[id=p0]').addClass('selected');
            sliderEl.find('div.slides div.slide[id=s0]').fadeIn(300);
            slidePosition = 1;
        } else {
            sliderEl.find('div.slides div.slide[id=s'+slidePosition+']').fadeIn(300);
            pagerNav.find('button.slide-select[id=p'+slidePosition+']').addClass('selected');
            slidePosition++;
        }
    }

    if(status === 'start') {
        sliderInt = setInterval(nextSlide, 2000);
    } else if(status === 'next') {
        nextSlide();
    }

    sliderEl.find('div.slider').hover(function(){
        clearInterval(sliderInt);
        sliderEl.find('button.slide-next').on('click',function(){
            slider('next');
        });
    },function() {
        slider('start');
    });
}

slider('start');

滑块启动，setInterval 工作正常；我遇到的问题是当我将鼠标悬停在幻灯片上以“暂停”它（这也有效）然后我将鼠标移开以再次启动它...滑块间隔加倍并开始以两倍的速度跳到下一张幻灯片速度。

有人可以帮忙吗？

【问题讨论】：

在调用clearInterval(sliderInt) 之前，你能不能先做一个console.log(sliderInt) 看看对象是否真的被分配了？
很奇怪，当我这样做时，它输出了一个 15 到 30 之间的随机数，然后当我将鼠标移出并重新插入时，它做了同样的事情，但 X2。这是为什么呢？
sliderInt 返回了一个数字？它应该返回对区间的引用，不是吗？我认为这是一条空白线索，但是如果您改为调用 window.setInterval() 和 window.clearInterval()，它的行为会有所不同吗？

标签： jquery slider setinterval

【解决方案1】：

Jody，我发现您的代码至少存在一个问题：每次调用函数时都会添加一个新的悬停处理程序。看，您调用了滑块函数，并附加了一个悬停处理程序。然后将鼠标移到元素上并将其移出，然后将再次调用滑块函数并附加新的悬停处理程序。现在有 2 个处理程序。因此，下次您再次执行此操作时，将调用 2 个处理程序，并且此代码也将被调用两次：

sliderInt = setInterval(nextSlide, 2000);

我的建议是将初始化代码移动到单独的命令中，并添加对双重“开始”调用的检查。像这样：

if (sliderInt) clearInterval(sliderInt);

整个解决方案是：

var slider = function(status) {

var nextSlide = function(){
    pagerNav.find('button.slide-select').removeClass('selected');
    sliderEl.find('div.slides div.slide').fadeOut(300);
    if(slidePosition === slideCount){
        pagerNav.find('button.slide-select[id=p0]').addClass('selected');
        sliderEl.find('div.slides div.slide[id=s0]').fadeIn(300);
        slidePosition = 1;
    } else {
        sliderEl.find('div.slides div.slide[id=s'+slidePosition+']').fadeIn(300);
        pagerNav.find('button.slide-select[id=p'+slidePosition+']').addClass('selected');
        slidePosition++;
    }
}

if(status === 'start') {
    if (sliderInt) 
         clearInterval(sliderInt);
    sliderInt = setInterval(nextSlide, 2000);
} else if(status === 'next') {
    nextSlide();
} else if (status === 'init') {

    sliderEl.find('div.slider').hover(function(){
        clearInterval(sliderInt);
        sliderInt = null;           

        sliderEl.find('button.slide-next').on('click',function(){
            slider('next');
        });
    },function() {
        slider('start');
    });
}

}

而且你应该只在某个地方调用一次 init：

slider('init');

然后开始

slider('start');

希望这会对你有所帮助。

【讨论】：