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/en-US/docs/DOM/window.setTimeout

clearTimeout： https://developer.mozilla.org/en-US/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的频率。否则频率会非常高，可能会使整个浏览器在调整大小时变得迟钝。

启动和停止setInterval和clearInterval

3 个答案: