Запуск и остановка 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); 

Это не может даже быть правильным способ сделать это, но я хотел бы знать, можно ли остановить запуск setInterval с помощью clearInterval, пока окно не будет изменено снова. В текущем состоянии, глядя на консоль, он просто продолжает регистрировать ширину.

Заранее благодарен!

Answer 1

Вам не нужно использовать таймер внутри вашего метода изменения размера, чтобы проверить, изменяется ли элемент. Метод изменения размера будет прослушивать изменение размера элемента.

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 называется. В противном случае частота будет очень высокой и, вероятно, сделает весь браузер вялым при изменении размера.