매 x 초마다 Javascript 함수를 호출하고 y 초 후에 중지 하시겠습니까?

Question

버튼을 클릭 한 후 Javascript 함수를 호출하고 싶을 때 1.5 초 동안 100 밀리 초마다 반복 한 다음 일시 중지합니다.

이 아코디언 슬라이더는이 사용자 정의 jQuery 스크롤 막대를 사용하여 스크롤 가능한 내용을 표시 할 수있게하려는 것입니다. (다른 더 나은 사용자 정의 크로스 브라우저 스크롤 막대는 전혀 모릅니다.)

스크롤 바는이 기능을 할 때마다 사용자가이를 사용하여 항목 중 하나를 클릭을 재구성해야

:

나는 아래의 예와 같이 setInterval을 사용했습니다 원활하게 실행 전환을하기 위해

$(".ac-big").customScrollbar("resize") 

:

<script type="text/javascript"> 
$(window).load(function() { 
$(function(){ 
    setInterval(function(){ 
    $(".ac-big").customScrollbar("resize") 
},100); 
}); 
</script> 

문제는 스크립트가 매우 많은 자원을 소비한다는 것입니다. 100 밀리 초마다 이것을 실행할 필요는 없습니다. 사용자가 하나의 라디오 버튼을 클릭 한 후에 만 ​​1.5 초 동안 100 밀리 초마다 실행되도록하고 싶습니다.

또 다른 문제가 있습니다. 아코디언 슬라이더는 라디오 버튼을 사용하여 제작되었으므로 라디오 버튼에서 javascript 기능을 호출하는 방법은 무엇입니까?

setTimeout과 setInterval을 태그에 삽입했습니다. 그 두 가지를 조합해야한다고 생각하기 때문에 태그에 setTimeout과 setInterval을 삽입했습니다. 필요한 모든 빌딩 블록이 있다면 여기에 시간을 낭비하지 않을 것입니다.

Answer 1

이 주어 :

나는 버튼을 클릭 한 후 자바 스크립트 함수를 호출 할

, 그것은 루프 1.5 초마다 100 밀리 초를하고 다음을 일시 중지합니다. http://jsfiddle.net/pUWHm/

// I want to call a Javascript function after clicking a button 
$('.button').click(function() { 
    var started = Date.now(); 

    // make it loop every 100 milliseconds 
    var interval = setInterval(function(){ 

    // for 1.5 seconds 
    if (Date.now() - started > 1500) { 

     // and then pause it 
     clearInterval(interval); 

    } else { 

     // the thing to do every 100ms 
     $(".ac-big").customScrollbar("resize") 

    } 
    }, 100); // every 100 milliseconds 
}); 

전략이 ​​버튼을 클릭하면 간격을 시작하는 것입니다, 당신은 간격 ID 것을 저장 :

이 그것을해야한다. 또한 시작했을 때 저장합니다. 간격이 매번 실행될 때마다 충분히 길 었는지 확인합니다. 아직 시간이 없다면, 그 일을하십시오. 시간이라면 다시 발사되지 않도록 간격을 지우십시오.