List

일요일, 12월 20, 2015

Javascript timer - setTimeout, setInterval, clearInterval 함수

1) setTimeout([Function], [Milliseconds])

 - 특정 시간 이 후, 단 한번만 특정 함수 또는 코드를 실행시킬 때 사용합니다.
 - 2번째 인자의 시간(Milliseconds)이 경과하면 1번째 인자의 함수를 실행합니다.

1
2
3
4
5
6
<script type="text/javascript">
   $(document).ready(function() {
       ... setTimeout("ozit_timer_test()"3000);
 // 3000ms(3초)가 경과하면 ozit_timer_test() 함수를 실행합니다.  ...});
</script>
cs

2) setInterval([Function], [Milliseconds])

 - 특정 시간 마다 특정 함수 또는 코드를 실행시킬 때 사용합니다.
 - 2번째 인자의 시간(Milliseconds)이 지날때마다 1번째 인자의 함수를 실행합니다.

1
2
3
4
5
6
7
<script type="text/javascript">
    var sum = 0
      $(document).ready(function() { 
     ... setInterval("ozit_interval_test()"5000); 
// 매 5000ms(5초)가 지날 때마다 ozit_timer_test() 함수를 실행합니다.  ...
    });
    function ozit_timer_test(){ 
// 이 함수는 5초마다 실행됩니다.sum += 1; // 매 5초마다 숫자 1을 sum 변수에 더합니다.
</script>
cs


 3) clearInterval([Timer Id])

 - setInterval function을 종료하기 위해서 필요
 - function의 id 값이 필요함

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
var timerId = 0
     $(document).ready(function() {
         timerId = setInterval("ozit_interval_test()"5000); 
         document.getElementById('stop_timer').onclick = function() { 
         clearInterval(timerId); // timerId 값을 인자로 입력하여 해당 setInterval 을 종료시킵니다.
     }});
</script
>  <span id='stop_timer'>타이머 멈추기</span>
cs






s

댓글 없음:

댓글 쓰기