CODEWITHSUNDEEP
javascriptjquery
user2057507
user2057507

Reputation: 3

Starting and Stopping setInterval and clearInterval

I'm very new to Javascript and jQuery and may have jumped into the deep end by trying to create a responsive slide show. I have the following code in terms of resizing the slider to fit the window, using a function that sets the individual slides to equal the width of the slider container by using 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);

This may not even be the right way to go about doing this but I would like to know if it is possible to stop the setInterval from running using clearInterval, until the window is resized again. In its current state, looking at the console, it just continues to log the width.

Thanks in advance!

Upvotes: 0

Views: 1244

Answers (3)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

I think what you want is as simple as this :

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.

The $w.off('resize') statement together with the setTimeout(handleResize, 100) statement reduce the frequency at which resizeSlider is called. Otherwise the frequency would be very high and probably make the whole browser sluggish while being resized.

Upvotes: 0

Brad
Brad

Reputation: 6332

Not totally sure why you're trying to use setInterval in the first place. Unless you're trying to animate over time, you could just listen for the window to resize then preform your resize operation without the interval. If you must use an interval, why don't you try something to this effect: 

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

The reason you're code above is not working is because you are calling the clear interval in the global scope so it executes before you've set the interval in the first place. By putting you're calls in the same anonymous function, they should execute after one another. One way or another, I don't totally follow what you're asking so I hope this helps.

Upvotes: 0

Dennis Martinez
Dennis Martinez

Reputation: 6512

You don't need to use a timer inside of your resize method to check if the element is resizing. The resize method will listen for the element to 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);

If this is not an approach you'd like to take and want to use the timer for other purposes, check out the following methods.

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

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

Upvotes: 1

Related Questions