JS- setTimeout, clearTimeout, setInterval, clearInterval

JS- setTimeout, clearTimeout, setInterval, clearInterval

---

 

오늘은 JS에서 함수의 실행 시간에 대한 방법에 대해

알아보겠습니다.

 

(1)

setTimeout/ clearTimeout

 

먼저 setTimeout은 지정한 시간이 지난 후 작성한 함수를

실행하는 방식입니다.

 

-1-

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

setTimeout(time, 1000);

-2-

function showName(name){
  console.log(name);
}

setTimeout(showName, 1000, 'James'); 
//함수에 James라는 인수를 넣을 수 있습니다.

 

실행하고자 하는 함수가 있고

그 함수를 일정 시간이 지난 후 실행시키고 싶을 때

사용하는 방식입니다.

 

위에 예시를 보시면 1을 출력하는

time이라는 함수가 있습니다.

 

이것을 setTimeout(함수, 시간, 인수);

이런 식으로 작성할 수 있습니다.

(참고로 1000은 1초를 의미합니다.)

 

clearTimeout은 지정했던 스케줄을 취소해서

함수의 실행을 중지시키는 방식입니다.

 

setTimeout을 중지하고자 할 때 사용할 수 있습니다.

 

(2)
setInterval/ clearInterval

 

setInterval은 지정한 시간을 간격으로 작성한 함수를

반복하는 방식입니다.

 

사용 방식은 setTimeout과 동일하고

차이점은 지정한 시간을 간격으로 반복한다는 것입니다.

끝까지 반복하기 때문에

 

clearInterval을 사용하시면 원하는 시간이나

수에 맞춰서 중지할 수 있습니다.

 

let num = 0;

function showTime() {
  console.log(`${num++}`);
  if(num > 10) {
   clearInterval(br);
  }
}

const bk = setInterval(showTime, 2000);

 

이런 식으로 응용해서 사용할 수 있습니다.

 

위에 예시를 보시면

숫자가 0부터 증가하는데

 

10보다 작을 경우 중지가 되도록

if문을 사용했습니다.

 

그래서 결과는 0부터 9까지

표시되는데 그 간격이 2초의

간격을 가지도록 설정했습니다.

 

이런 식으로 응용해서 함수를

원하는 시간 동안 반복할 수도,

원하는 시간 뒤에 시작할 수도 있습니다.

 

---

 

오늘은 setTimeout, clearTimeout,

setInterval, clearInterval에 대해 알아보았습니다.

 

정말 유용하게 사용할 수 있고

사용 방식도 간단해서 가독성도 좋습니다.

 

오늘 내용을 알아두시고 추후에 사용하시면

유용하게 사용하실 수 있으실 겁니다.

 

감사합니다!