開始和停止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/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. 

與setTimeout(handleResize, 100)語句$w.off('resize')語句一起抑制用於resizeSlider被稱爲頻率。否則，頻率會非常高，可能會導致整個瀏覽器在調整大小時緩慢。