[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, setTimeout() {}

자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다.

# setTimeout()이란?

일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다.

위 함수는 보통 두 개의 인자를 설정하여 사용합니다.

• i. 호출될 콜백함수
• ii. 지연시간(delay time)

setTimeout() 함수의 내부에 위치한 코드 function() { // Code here }는 콜백함수로 지연시간 뒤에 실행될 코드를 설정합니다. 지연시간은 밀리세컨드 단위로 설정해야하며 예를들어 지연시간 1000은 1초, 10000은 10초를 의미합니다. 만약 3초 뒤에 실행되야 한다면 아래와 같이 설정합니다.

! 3초의 지연시간 설정 예제

이제 위 예제를 실행하면 3초 뒤에 "Works!"를 출력하게됩니다. 여기까지 setTimeout() 함수가 무엇이고 어떻게 사용하는지 간단하게 알아보았습니다. 아래부터는 예제소스 및 활용방안에 대하여 알아봅니다.

(참고로, 자바스크립트의 타이머 기능은 고급 기능 중 하나로 단순하거나 복잡한 웹어플리케이션에서는 싱글쓰레드 방식의 타이머 구조를 이해할 필요가 있습니다.)

# setTimeout() 활용방법, 언제 사용하는가?

이 함수가 웹사이트 개발시 가장 많이 사용되는 경우는 언제가 있을까요? 다양한 케이스가 있겠지만 몇 가지 나열해보면 다음의 경우도 이에 해당하겠죠.

• i. 접속 후 몇 초 후에 팝업 또는 배너창 띄우기
• ii. 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션 실행
• iii. 검색창 또는 일부 섹션 몇 초 뒤에 사라질 경우
• iv. 방문자 접속 후 20-30초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울 경우

위에 나열된 내용처럼 다양한 극히 일부분으로 훨씬 많은 활용 방안이 있을 것입니다.



# setTimeout() 함수 예제 소스코드 보기아래는 간단한 setTimeout() 예제로 3초 후 현재 페이지 url 주소인 'http://webisfree.com'을 알림창으로 보여주려합니다. 그럼 아래를 봐주세요.

위 코드를 간단히 알아보면... 뒤에 숫자타입의 3000은 밀리세컨드로 3초를 설정하였습니다. 즉 3초 뒤 콜백함수를 실행하게되죠...

! 만약 계속해서 3초마다 출력하려면?

만약 일정시간마다 반복되는 함수를 찾는다면 setInterval()을 사용할 수 있습니다. setInterval()은 일정시간마다 반복해서 코드를 실행합니다.

# clearTimeout() 예제보기

타이머 함수를 설정할 수 있다면? 당연히 이를 중지, 삭제 할 수도 있겠죠.  clearTimeout()이 바로 그것입니다. setTimeout을 사용하면 숫자타입의 값을 반환합니다. 실행을 중지할 경우... 즉 남아있는 시간을 해제할 경우 를 위해 clearTimeout()을 설정해야합니다.

아래 예제는 setTimeout() 함수를 myTimer에 담은 후 이를 clearTimeout()으로 해제, 삭제하는 예제입니다.

! setTimeout()을 사용한 반복 코드 구현, setInterval()

setTimeout()을 사용하여 계속 반복하는 코드 역시 만들 수 있습니다. 이는 setInterval()과 매우 비슷합니다. 다만 시간단위가 아닌 이전의 setTimeout()이 끝나야 동작하게됩니다. 이는 시간이 아닌 큐에 의하여 동작하게됩니다.

! setTimeout() 함수와 생각해 볼 부분

아래는 setTimeout() 타이머 함수를 실행하면서 고려할 부분들을 몇가지 정한 부분입니다. 함께 참고하세요.

@ 함수 내부 클로저가 발생하는 이슈
setTimeout() 내부의 익명함수로 클로저를 발생할 수 있습니다. 이는 의도하지 않은 결과값을 리턴할 수도 있습니다. 클로저에 대하여 자세히 알려면 아래 링크를 참조하세요!
http://webisfree.com/2015-06-25/자바스크립트-클로저-closure-이해하기


@ 메모리 누수(Memory Leak)의 발생
페이지가 전환되지 않는 경우... 특히 싱글 페이지(SPA)인 경우 사용되지 않은 setTimeout() 코드가 메모리에 계속 남아 있을 수 있으며 가비지컬렉션(GB)에 의하여 회수 되지 않은 경우 성능저하의 원인이 됩니다. 반드시 setTimeout() 이벤트는 이벤트를 제거하는 코드 역시 필요합니다. clearTimeout()은 설정된 setTimeout()을 제거하는 함수입니다.


@ 현재 웹페이지에 설정된 setTimeout() 타이머 함수가 있는지 알 수 있을까?
어떤 웹사이트를 방문했는데 만약 이 페이지에 설정된 타이머 함수가 있는 지 알 수 있을까요? 그래서 얼마 뒤에 어떤 함수가 호출될 지를 미리 알 수 있을까 궁금했습니다. 찾아보니 확인할 수 있는 방법이 없더군요 ~ 이벤트 객체의 어떤 부분을 통해 확인이 가능할 것 같기도 한데 간단한 인터페이스가 존재하지는 않았습니다.

# setTimeout() 관련 링크 알아보기

더 많은 정보는 아래링크에서도 찾아보실 수 있습니다.

setInterval() 함수 바로가기 >
http://webisfree.com/2014-10-23/[자바스크립트]-일정-시간마다-반복-실행하는-함수-setinterval()-{}

싱글쓰레드(Single Thread) 바로가기 >
http://webisfree.com/2017-06-08/자바스크립트의-싱글스레드-방식-이해하기

위 링크는 알아두면 도움이 되는 링크로 참고하세요.