setTimeout과 setInterval

 

 

  UI를 제작하는 중에 잘못된 양식을 입력한 후 submit 버튼을 클릭한 경우 에러메시지를 보여주는 popper를 띄우고 다시 없애는 UX를 개발하고 싶었다. 그래서 setTimeout을 사용하면 되겠구나 생각이 들었지만 문법이 기억나지 않아서 다시 문서를 찾았다. setTimeout은 자주 사용하는 JS메소드라 기억하면 좋을 거 같아 이번에는 이렇게 정리한다.

  일정 시간이 지난 후 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 호출 스케줄링이라고 한다. JS에서 사용하는 대표적인 두 가지 호출 스케줄링에 setTimeout과 setInterval이 있다.

 먼저, setTimeout은 일정시간이 지난 후에 함수를 실행하는 방법이다. 

let timer = setTimeout( func | code, [delay], [arg1], [arg2], ... )

func과 code는 실행하고자 하는 고드이다. 함수 또는 문자열 형태이고 주로 함수가 들어간다. delay는 실행 전 대기 시간으로 단위는 밀리초(1000밀리초 = 1초)이다. 기본값은 0이다. arg1, arg2는 함수에 전달할 인수들이다. IE9 이하에선 지원하지 않는다.

setTimeout(() => alert('안녕하세요', 1000);

setTimeout을 호출하면 타이머 식별자가 반환된다. 스케줄링을 취소하고 싶을 때는 clearTimeout으로 스케줄링을 취소한다.

let timer = setTimeout(...);
clearTimeout(timer);

 

두 번째 setInterval은 함수를 주기적으로 실행하게 만든다. 사용방법은 setTimeout과 동일하다.

let timer = setInterval( func | code, [delay], [arg1], [arg2], ... )

마찬가지로 setInterval 역시 종료는 clearTiemout으로 한다. setInterval과 setTimeout을 활용하여 2초 간격으로 보이다가 5초 이후에 메시지가 더 이상 보이지 않는 다음과 같은 코드를 작성할 수 있다.

let timer = setInterval(() => alert('째각'), 2000);
setTimeout(() => { clearInterval(timer); alert('정지'); }, 5000);

 

  세 번째 중첩 setTimeout을 활용해서도 일정 간격을 두고 코드를 실행시킬 수 있다. CPU 소모가 많은 작업을 주기적으로 실행하는 경우에는 setTimeout을 재귀 실행하는 방법이 유용하다. 작업에 걸리는 시간에 따라 다음 작업을 유동적으로 계획할 수 있기 때문이다. 그래서 중첩 setTimeout을 이용하는 방법은 지연 간격을 보장하지만 setInterval은 이를 보장하지 않는다.

 예를 들어서 1초마다 1씩 증가하는 코드를 작성하고 싶을 때 두 가지 방법으로 작성할 수 있다. 먼저, setInterval을 활용하면 이렇다.

let i = 0;
setInterval(() => {i = i + 1}, 1000);

중첩 setTimeout을 사용하면 이렇다.

let i = 0;
setTimeout(function run () {
	i = i + 1;
	setTimeout(run, 1000);
}, 1000);

 

참조: https://ko.javascript.info/settimeout-setinterval