[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, 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'을 알림창으로 보여주려합니다. 그럼 아래를 봐주세요.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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


! 만약 계속해서 3초마다 출력하려면?만약 일정시간마다 반복되는 함수를 찾는다면 setInterval()을 사용할 수 있습니다. setInterval()은 일정시간마다 반복해서 코드를 실행합니다.



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


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


! clearTimeout()의 설정설정된 타이머는 이를 중지할 수 있는 숫자타입의 값을 반환합니다. 실행을 중지할 경우... 즉 남아있는 시간을 해제할 경우 를 위해 clearTimeout()을 설정해야합니다.


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

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

[출처] https://webisfree.com/2014-04-08/[javascript]-%EC%8B%9C%EA%B0%84-%EC%A7%80%EC%97%B0-%ED%95%A8%EC%88%98-%EC%9D%BC%EC%A0%95-%EC%8B%9C%EA%B0%84-%EB%92%A4-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0-settimeout()-%7B%7D