JS - setInterval, setTimeout란?

JS - setInterval, setTimeout란?

오늘은 JS에서 유용하게 사용되는

setInterval과 setTimeout에 대해 알아보겠습니다.

 

두 개의 함수는 모두 출력되는

시간과 관련이 있는 함수입니다.

 

프로젝트를 진행하시다 보면

일정 시간을 텀을 두고 반복을 해야 하는 경우나

일정 시간이 지난 뒤에 실행되는 코드를 작성해야 하는

경우가 있습니다.

 

그럴 경우에 setInterval, setTimeout 함수를 사용할 수 있습니다.

이제 두 개의 함수를 본격적으로 설명드리겠습니다.

 

(1)

setInterval

먼저 setInterval은 일정 시간을 기준을 정해서

계속해서 반복할 때 사용합니다.

 

예를 들면, 5초에 한 번씩 실행되는 코드를

만들고 싶을 경우 사용할 수 있는데요!

 

이때

function setIn() {
 console.log(1);
}

setInterval(setIn, 2000);

이런 식으로 작성하면 콘솔 창에 2초에 한 번씩

1이란 숫자가 출력이 되는 코드를 작성할 수 있습니다.

(시간은 1초 = 1000과 같습니다.)

 

이렇게만 보면 굳이 사용할 이유가 없어 보이지만

예를 들면 시간을 나타내는 파일을 만드는 경우

초단위까지 보이는 시계를 만들었을 때

계속해서 1초 단위로 시간을 반복해서 출력해야 하기 때문에

 

이때 setInterval을 사용하시면 좋습니다.

 

(2)

setTimeout

다음은 setTimeout으로 setInterval과 다르게

정해진 시간 후에 실행되도록 만드는 함수입니다.

 

이때

function setTi() {
 console.log(1)
}

setTimeout(setTi, 5000);

이런 식으로 작성하면 콘솔 창에 5초 뒤에 

1이란 숫자가 출력되도록 만들 수 있습니다.

 

setInterval과 마찬가지로 예시만 봤을 때는

왜 사용하는지 의문이 들 수 있습니다.

 

setTimeout은 웹, 앱을 사용하는 사용자들에게

일정 시간 후에 사진을 보여주는 경우나,

 

JS를 통해 만든 간단한 게임에서 

원하는 시간 뒤에 시작할 수 있게 만드는 경우 등에서

사용할 수 있습니다.

 

---

 

오늘은 setInterval, setTimeout에 대해서

알아보았습니다.

 

두 개의 함수는 정말 유용한 함수로

공부를 하시거나 프로젝트를 진행하실 때

알아두시면 사용하실 경우가 있는

정말 유용한 함수입니다.

 

감사합니다!!

 

JS(JavaScript)란?