setInterval 및 clearInterval 시작 및 중지

Question

저는 Javascript 및 jQuery에 매우 익숙하며 반응이 빠른 슬라이드 쇼를 만들려고 시도하여 심층적 인 작업에 뛰어 들었을 수 있습니다.

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

이라도 맞지 않을 수 I는 setInterval을 사용하여 슬라이더 컨테이너의 폭과 동일하도록 각각의 슬라이드를 설정하는 기능을하여, 창에 맞게 슬라이더 크기 조정의 관점에서 다음 코드가 방법에 대해 이동하는 방법을 알고 있지만 창이 다시 크기가 조정될 때까지 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가 호출되는 빈도를 줄일 수 있습니다. 그렇지 않으면 빈도가 매우 높아서 크기가 조정되는 동안 전체 브라우저가 느려질 수 있습니다.