0

我对 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 运行，直到再次调整窗口大小。在当前状态下，查看控制台，它只是继续记录宽度。

提前致谢！

4

3 回答 3

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

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

设置超时： https ://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

clearTimeout： https ://developer.mozilla.org/en-US/docs/DOM/window.clearTimeout

于 2013-02-09T20:16:03.377 回答
0

不完全确定您首先尝试使用 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); 
}
});

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

于 2013-02-09T20:17:20.690 回答
0

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

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否则频率会非常高，并且可能会使整个浏览器在调整大小时变得迟缓。

于 2013-02-09T20:52:03.667 回答