자바스크립트 함수에 딜레이를 걸어보자: setTimeout과 setInterval

프로그래밍을 하다 보면  특정 이벤트에 딜레이를 걸어줘야 하는 일이 종종 있다.

자바스크립트에서 자주 사용되는 딜레이 메서드인 setInterval과 setTimeout에 대해 알아보자.

 

이 두 메서드를 사용할 때 주의할 점은, 딜레이 측정이 동시에 진행된다는 점이다.

간단한 소개 이후 실제 예제를 통해 살펴보자.

 

setTimeout 메서드

 

함수실행까지 일정 딜레이를 부여하는 기능을 가진 메서드이다.

Timeout은 시간초과를 뜻한다.

 

 메서드 코드형태

setTimeout(함수이름, 지연시간);

이때, 지연시간의 단위는 millisecond(밀리세컨드, 천분의 1초)이다.

 

만약 함수실행까지 10초의 딜레이를 주고 싶다면 두 번째 인자로 숫자 10,000을 집어넣으면 된다. 

 

 

 

setInterval 메서드

 

함수를 일정 시간마다 반복 실행시켜 주는 기능을 갖는 메서드이다.

Interval은 간격을 뜻한다.

 

메서드 코드형태

setInterval(함수이름, 시간간격);

시간간격의 단위는 setTimeout 메서드와 마찬가지로 밀리세컨드이다.

 

 

주의할 점:

코드는 순차적으로 실행되지만, setTimeout이 끝나야 그 아래의 코드들이 실행되는 것이 아니다.

setTimeout과 setInterval  메서드들의 지연시간은 다 함께 통합된다.

start

*텍스트 변화가 없을시 새로고침을 해주세요

 

위의 HTML 타이머코드의 의도는 다음과 같다.

 

1. "start"를 3초 뒤에 숫자 5로 바꾼다

2.  1초마다 숫자가 1씩 감소한다.

3.  숫자가 0이 될 시 출력되는 텍스트를 "boom"으로 바꾼다.

 

하지만 start가 boom으로 먼저 변한 후 

숫자 5로 바뀌는 것을 볼 수 있다.

 

그 이유는 setTimeout과 setInterval의 지연 시간이 동시에 계산되기 때문이다.

<!-- html 태그요소-->

<h2 id="timer">start</h2>
    
    <script>
    // h2의 DOM요소를 변수에 저장한다.
        const timer = document.querySelector("h2#timer")
    
    // setTimeout. 3초뒤에 를 숫자 5로 바꾼다.
    
        setTimeout(() => {timer.innerHTML = 5;}, 3000)
    
    
    // 숫자를 1씩 감소시키는 함수
    // 만약 숫자가 0이될시, h2 텍스트를 "boom"으로 번경한다.
    
        function tiktok() {
            const tik = parseInt(timer.innerText);
            if (tik > 0){
            timer.innerHTML = tik - 1;
            } else {
                timer.innerHTML = "boom"
            };
    }
           
        
        // setInterval. 1초마다 tiktok을 실행시킨다.
        setInterval(tiktok, 1000);

        
        
    </script>

 

이런 문제점은 setTimeout내부에 setInterval을 넣어 해결해 줄 수 있다.

 

<h2 id="timer">start</h2>
    <script>
        const timer = document.querySelector("h2#timer")
        


        setTimeout(() => {
            timer.innerHTML = 5;
            setInterval(tiktok, 1000);
        }, 3000);
        
        
        function tiktok() {
            const tik = parseInt(timer.innerText);
            if (tik > 0){
            timer.innerHTML = tik - 1;
            } else if (tik <=0 ){
                timer.innerHTML = "boom"
            };

       
    }
            
        
    </script>

 

이제 3초 뒤에 start가 5로 바뀐 후에

setInterval이 1초마다 실행되는 것을 볼 수 있다.

start

*텍스트 변화가 없을시 새로고침을 해주세요

 

 

읽어주셔서 감사합니다

 

오탈자나 궁금한점은 댓글로남겨주세요.