启动和停止setInterval和clearInterval

Question

我对Javascript和jQuery还是很陌生，并且可能试图通过创建响应式幻灯片来跳入深渊。 关于通过使用setInterval将单个幻灯片设置为等于滑块容器宽度的函数，我具有以下代码来调整滑块以适合窗口大小：

var slider          = $('.slider'),         // Get the div with a class of slider
    sliderWidth     = slider.width(),       // Get the width of the slider
    gallery         = $('.slider ul'),
    slides          = $('.slider ul').children('li'),
    noOfSlides      = slides.length,
    speed           = 5000,
    current         = 0,
    slideShowInt,
    responseSlider;

// Initially set the width of the li to equal the width of the slider
$('.slider ul').children('li').width(sliderWidth);                  

// Run a function that keeps making the 
//   li width equal the slider when window is resized
function resizeSlider(){
    responseSlider = setInterval(function(){
        slider      = $('.slider'),
        sliderWidth = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);           
    },10);
}


$(window).resize(resizeSlider);

clearInterval(responseSlider);

这甚至可能不是执行此操作的正确方法，但我想知道是否可以使用clearInterval停止setInterval的运行，直到再次调整窗口大小为止。 在当前状态下，查看控制台，它将继续记录宽度。

提前致谢！

Answer 1

您无需在resize方法中使用计时器来检查元素是否正在调整大小。 resize方法将侦听要调整大小的元素。

http://api.jquery.com/resize/

var slider          = $('.slider'),         // Get the div with a class of slider
    sliderWidth     = slider.width(),       // Get the width of the slider
    gallery         = $('.slider ul'),
    slides          = $('.slider ul').children('li'),
    noOfSlides      = slides.length,
    speed           = 5000,
    current         = 0,
    slideShowInt;


$('.slider ul').children('li').width(sliderWidth);                  // Initially set the width of the li to equal the width of the slider

function resizeSlider(){

        slider          = $('.slider'),
        sliderWidth     = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);
}


$(window).resize(resizeSlider);

如果这不是您要采用的方法，并且想将计时器用于其他目的，请查看以下方法。

setTimeout： https : //developer.mozilla.org/zh-CN/docs/DOM/window.setTimeout

clearTimeout： https : //developer.mozilla.org/zh-CN/docs/DOM/window.clearTimeout

Answer 2

不能完全确定为什么首先要尝试使用setInterval。 除非您尝试随着时间进行动画处理，否则您可以只听窗口调整大小，然后执行无间隔的调整大小操作。 如果必须使用时间间隔，为什么不尝试执行以下操作：

var myFlag = false;

function resizeSlider(){
    responseSlider = setInterval(function(){
        var myFinalWidth = //what ever you want your final width to be 
        slider          = $('.slider'),
        sliderWidth     = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);
if(myFinalWidth == slides.width){
myFlag = true; 
}

    },10);                                                          
}

$(window).resize(function(){
resizeSlider(); 
if(myFlag){
clearInterval(responseSlider); 
}
});

您上面的代码不起作用的原因是，因为您正在全局范围内调用清除间隔，因此在您首先设置间隔之前它会执行。 通过将调用置于同一个匿名函数中，它们应该一个接一个地执行。 一种或另一种方式，我不能完全按照您的要求来做，所以希望对您有所帮助。

Answer 3

我认为您想要的就是这样简单：

var slider = $('.slider'),// Get the div with a class of slider
    slides = $('.slider ul').children('li'),
    $w = $(window);

function handleResize() {
    $w.on('resize', resizeSlider);
}
function resizeSlider() {
    slides.width(slider.width());
    $w.off('resize');
    setTimeout(handleResize, 100);//adjust to the highest acceptable value.
}
resizeSlider();//run resizeSlider() to initialize everything.

$w.off('resize')语句与setTimeout(handleResize, 100)语句一起减少了调用resizeSlider的频率。 否则，频率将很高，并可能在调整大小时使整个浏览器变慢。