[JS] javascript에서 시간 제어하기

javascript에서는 특정한 함수를 이용해 시간을 제어할 수 있다.

 

크게 두가지로 나뉘는데 하나는 특정 시간 뒤에 동작하게 하는 setTimeout이고, 하나는 특정 시간마다 동작하게 하는 setInterval 이다.

 

둘다 상황에 따라 시간을 제어할때 많이 쓰는 것이니 잘 익혀두도록 하자.

 

setTimeout

 

아래 예시를 보자. 굉장히 간단한 예시이다.

function func() {
  console.log('3초 지남');
}

setTimeout(func, 3000);

이렇게 하면 func라는 함수가 3초 뒤에 실행된다. 여기서 숫자의 단위는 ms 이다(1000 ms당 1초)

아 ! 그리고 여기서 주의해야할게 저기 숫자에 0을 넣는다고해도 바로 실행되지는 않는다. ( 4ms 정도의 딜레이가 있다.)

 

아래처럼 한번에 표현도 가능하다.

setTimeout(function() {
  console.log('3초 지남')
}, 3000);

 

그렇다면..! 매개변수가 있는 함수는 어떻게 사용하면될까?

아래 예시를 보자.

 

function printLog(logTxt) {
  console.log(logTxt);
}

setTimeout(printLog, 3000, '정상 수행');

이렇게 숫자 뒤에 매개변수에 해당하는 데이터를 넣어주면 된다.

 

그리고 timeout 동작하지 않도록 막는 방법도 있다. clearTimeout을 이용하면된다. clearTimeout은 setTimeout 수행시 반환되는 task id를 이용하면 된다.

function actionFunc(actionInfo) {
  console.log(actionInfo);
}

const tId = setTimeout(actionFunc, 5000, '작업 수행');

clearTimeout(tId);

이렇게 해두면 timeout 설정된 actionFunc 함수가 실행되지 않는다.

 

 

setInterval

 

특정 시간마다 동작하게 하는 이 함수는 setTimeout과 사용법이 동일하다.

setInterval(function(taskInfo) {
  console.log(taskInfo+ '이 3초 마다 수행')
}, 3000, 'XX작업');

 

이 작업이 일어나지 않게 하려면 clearInterval을 이용하면된다. clearInterval 은 setInterval 수행시 반한되는 task id를 이용하면 된다.

const tId = setInterval(function(taskInfo) {
  console.log(taskInfo+ '이 3초 마다 수행')
}, 3000, 'XX작업');

clearInterval(tId);

 

보통 특정 서비스에 들어가서 아무동작이 없으면 로그아웃을 시키거나 서비스를 종료하는 기능을 이 Interval을 이용해서 구현해볼 수도 있다.

let num = 0;
function myService() {
  num++; 
  if(num > 60) {
     console.log('60 초가 지나 서비스를 종료합니다.');
     clearInterval(tId);
   }
}

const tId = setInterval(myService,1000);

 

끝.