[자바스크립트] 타이머 함수 (setTimeout, setInterval)

타이머 함수

타이머 함수는 일정 시간이 지난 후 특정 코드를 실행해주는 함수를 말한다.

 

---

 

타이머 함수 종류

• setTimeout
• setInterval

 

---

 

setTimeout

setTimeout은 코드를 설정한 시간이 지난 후 실행시켜준다.

 

 

문법

setTimeout( 코드, 지연 시간, 함수에 전달할 인수 );

 

 

 

setTimeout을 사용하여 5초 뒤에 console log에 특정 문장을 찍어보자.

 

예제 코드 1

setTimeout(function () {
    console.log('개발자 퉁이리');
}, 5000);

 

예제 코드 2

setTimeout(() => {console.log('개발자 퉁이리')}, 5000);

 

여기서 지연시간은 밀리세컨드 단위로 설정, 만약 5초로 설정하고 싶다면 지연시간은 5000.

 

5초 후에 console에 "개발자 퉁이리"라고 log가 찍히는 것을 확인할 수 있다.

 

 

 

✖️ setTimeout 중지 함수 (clearTimeout)

타이머 함수인 setTimeout 함수를 중지하고 싶다면 clearTimeout 함수를 사용하면 된다.

 

clearTimeout(timeoutID)

 

---

 

setInterval

setInterval은 코드를 일정 시간마다 실행시켜준다.

 

 

문법

setInterval( 코드, 지연 시간, 함수에 전달할 인수 );

 

 

setInterval을 사용하여 5초마다 console log에 특정 문장을 찍어보자.

 

예제 코드 1

setInterval(function () {
    console.log('개발자 퉁이리');
}, 5000);

 

 

예제 코드 2

setInterval(() => {console.log('개발자 퉁이리')}, 5000);

 

 

5초마다 console에 "개발자 퉁이리"라고 log가 찍히는 것을 확인할 수 있다.

 

 

 

✖️ setTimeout 중지 함수 (clearInterval)

타이머 함수인 setInterval 함수를 중지하고 싶다면 clearInterval 함수를 사용하면 된다.

 

clearInterval(timeoutID)

 

 

 

---

 

🔥 중지 함수를 꼭 사용해야 할까?

 

타이머 함수를 사용했다면 타이머 해제 함수도 꼭 작성해주자.

 

코드가 짧다면 사실 별문제가 되지 않을 수도 있다.

그렇지만 대규모 프로젝트나 코드 길이가 짧더라도 로직에서 살짝 꼬이게 된다면 문제를 야기할 수도 있다.

 

그러한 가능성을 아예 없애기 위해 타이머 함수를 사용했다면 타이머 해제 함수도 꼭 작성해주자.

 

 

 

마무리

일회성 : setTimeout()

지속성 : setInterval()

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!