[javascript] setTimeout , setInterval - 일정시간 동안 반복 실행

1.setTimeout 개념

일정 시간 후 한번 실행

setTimeout은 지정해 놓은 시간 후에 한번만 실행하는 속성

 

2.setTimeout 예제

메시지 출력하는 예제

Javascript 코드

1 2 3 4 5 6

<script> setTimeout ( function () { console . log ( "2초후에 한번 실행됩니다." ); }, 2000 ); </script>

결과 화면

setTimeout 사용 예제

코드 설명

setTimeout .........

setTimeout은 지정한 시간 이후에 코드 안에 있는 내용을 실행하라는 의미입니다.
시간을 지정할 때는 밀리세컨드 단위로 설정하게 됩니다.
그래서 1초 후에 해당하는 코드를 실행하라고 할 때는 지연 시간을 1000으로 입력해줘야 1초가 되는 것입니다.
만약 1분을 하고자 할 경우에는 1000*60 = 60000을 입력해 주시면 됩니다.
이 속성은 정확하게 한번만 실행한 후에 더 이상 실행이 되지 않습니다.
그래서 위에서 보는 것처럼 console 창에 로그를 찍어보면 "2초후에 한번 실행됩니다."를 출력한 후에 더 이상 출력이 되지 않는 것을 확인하실 수 있습니다.

3.setInterval 개념

일정 시간 후 반복 실행

setInterval은 정해 놓은 시간을 기준으로 반복적으로 실행되는 속성

4.setInterval 예제

메시지 출력하는 예제

Javascript 코드

1 2 3 4 5 6

<script> setInterval ( function () { console . log ( "2초 시간마다 계속 실행됩니다." ); }, 2000 ); </script>

결과 화면

setInterval 사용 예제

코드 설명

setInterval .........

setInterval은 지정한 시간 단위로 반복적으로 코드를 실행하라는 실행하라는 의미입니다.
위에서 보시는 결과화면을 보게 되면 2초 시간마다 실행됩니다. 라는 메시지 앞에 6이라는 숫자가 있습니다.
이는 제가 테스트를 진행해 보면서 2초 시간 마다 실행되면서 카운드가 쌓이는 것을 의미합니다.
그래서 저는 6번에 걸쳐서 동일한 메시지가 출력된 것을 확인하실 수 있습니다.
setTimeout은 시간 뒤에 한번 실행하게 되지만 setInterval는 반복적으로 계속 진행하는 것을 알 수 있습니다.

5.clearTimeout 개념

일정 시간 후 실행 중단

clearTimeout은 setInterval로 설정해 놓은 것을 일정한 시간 뒤에 실행 중지하는 속성

6.clearTimeout 예제

반복적인 메시지 출력을 끝내는 예제

Javascript 코드

1 2 3 4 5 6 7 8 9 10

<script> var testInterval = setInterval ( function () { console . log ( "2초 시간마다 계속 실행됩니다." ); }, 2000 ); setTimeout ( function () { clearTimeout (testInterval); }, 7000 ); </script>

결과 화면

clearTimeout 사용 예제

코드 설명

clearTimeout .........

setInterval을 통해서 2초마다 해당하는 메시지를 출력하게 하였습니다.
그리고 setTimeout을 통해서 7초 후에 clearTimeout을 실행하게 하라는 한번 실행하라는 코드를 넣었습니다.
그래서 console 쪽에서 출력되는 메시지를 보게 되면 원래는 3개 이상으로 브라우저가 살아 있을 동안 계속해서 메시지를 출력하게 될 텐데 그렇지가 않습니다.
이유는 7초가 되는 시점에 clearTimeout을 실행하게 되면서 setTimeout을 선언한 변수 testInterval가 종료 되었기 때문입니다.