[JavaScript] setTimeout(), setInterval(), clearTimeout() 타이머 주는 법

 

 

 

setTimeout()

지정된 시간이 지난 후 한 번 실행되는 타이머를 설정하는 함수. 지정된 시간이 지나면 전달된 함수가 실행된다.

setTimeout(function(){ 실행할 코드 }, delay)

• function(){} : 지연 시간 지나면 실행할 함수
• delay : 지연 시간 (밀리초 단위, 1000ms = 1초)

setTimeout(function(){
	console.log('안녕');
}, 1000)

위 코드는 1초(1000ms) 후에 콘솔에 '안녕'이라는 메시지를 출력한다.

 

<div class="alert alert-danger">
    5초 이내 구매시 사은품 증정!
</div>

<script>
    setTimeout(function(){
        $('.alert').hide();
    }, 5000)
</script>

위 코드는 페이지 방문시 5초 후에 '5초 이내 구매시 사은품 증정'이라는 메시지가 사라진다.

 

 

clearTimeout()

setTimeout()으로 설정한 타이머를 취소할 때 사용되는 함수.

즉, setTimeout()으로 등록된 함수가 아직 실행되지 않았다면, 타이머를 취소하여 해당 함수가 실행되지 않도록 할 수 있다.

특정 조건에서 타이머가 실행되지 않도록 취소하고 싶을 때 사용한다.

clearTimeout(timeoutId);

• timeoutID  : setTimeout() 함수가 반환한 고유 ID이다. 이 ID를 사용하여 특정 타이머를 취소할 수 있다.

// 5초 후에 실행될 타이머를 설정
let timeoutId = setTimeout(function() {
    console.log("이 메시지는 출력되지 않습니다.");
}, 5000);

// 타이머를 2초 후에 취소
clearTimeout(timeoutId);

위 코드에서 setTImeout()으로 5초 후에 콘솔에 메시지를 출력하는 타이머를 설정했다.

하지만 2초 후에 clearTimeout(timeoutId)를 호출하여 타이머를 취소했기 때문에, 5초가 지나도 메시지는 출력되지 않는다.

 

let timeoutId = setTimeout(function() {
    console.log("이 메시지는 출력되지 않습니다.");
}, 5000);

// 3초 후에 타이머 취소
setTimeout(function() {
    clearTimeout(timeoutId);
    console.log("타이머가 취소되었습니다.");
}, 3000);

위 코드는 5초 후 실행 될 타이머를 설정한 후, 3초 후에는 그 타이머를 취소한다. 

따라서 5초 후에 메시지가 출력되지 않고, 3초 후에 "타미어가 취소되었습니다"라는 메시지가 출력된다.

clearTimeout()을 사용하면 타이머를 중간에 취소할 수 있다.

setInterval()

특정 지연 시간마다 반복적으로 함수를 실행하는 타이머를 설정하는 함수. 지정된 간격마다 계속해서 함수를 호출한다.

setInterval(function(){}, delay);

• function(){} : 일정 시간마다 실행할 함수
• delay : 간격 시간 (밀리초 단위)

setInterval(function() {
    console.log("1초마다 실행됩니다.");
}, 1000);

위 코드는 1초(1000ms)마다 콘솔에 "1초마다 실행됩니다"라는 메시지를 출력한다.

 

setInterval()도 고유 ID를 반환하며, 이를 사용해서 타이머를 중지할 수 있다. 

중지하려면 clearInterval()을 사용한다.

let intervalId = setInterval(function() {
    console.log("반복 작업");
}, 1000);

setTimeout(function() {
    clearInterval(intervalId); // 5초 후에 반복을 중지함
}, 5000);

위 코드는 1초마다 "반복 작업"을 출력하다가 5초 후에 반복을 중지한다.

 

 

(참고) 콜백함수

함수의 파라미터 자리에 들어가는 함수를 콜백함수라고 한다.

addEventListener(), setTimeout() 등 함수 안에 콜백함수를 요구한다.

중요한 점은 콜백함수도 일종의 함수이기 때문에 다른 곳에서 만든 함수를 집어 넣어도 잘 작동한다는 것이다.

setTimeout(함수, 1000);

function 함수(){ 
  console.log('안녕')
}

예를 들어 위에서와 다르게 이렇게 작성해도 잘 실행된다.

위 코드는 1초 후에 '안녕'을 출력한다.

콜백함수 자리가 복잡하면 다른 곳에 함수를 만들어 놓고 그 함수 이름만 콜백함수 자리에 집어 넣는 식으로 코드를 짜도 된다.

 

 

<div>안에 "5초 이내 구매시 사은품 증정"이라는 문자가 있다.

1초마다 5라는 문자를 1씩 감소 시켜 보자.

0이 되면 <div>를 안 보이게 처리한다.

 

<div>
   5초 이내 구매시 사은품 증정
</div>

<script>
    var count = 5;
    var Timer = setInterval(function(){
        count -= 1;
        if(count >= 0){
            document.querySelector('#num').innerHTML = count;
        }
        if(count === 0){ // count가 0이 되면 .alert를 숨김
            document.querySelector('.alert').style.display = 'none';
            clearInterval(Timer); // 카운트가 멈추도록 타이머 종료
        }
    }, 1000)
</script>

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.