[JS] 시간 지연 함수 setTimeout()

 

 

 

 

 

 

1. setTimeout()

일정 시간 후에 특정 코드, 함수를 지연한 후 실행하고 싶을 때 사용하는 함수이다.

setTimeout(function() { 
// 코드 작성
}, delay);

 

setTimeout() 함수의 내부에 작성한 코드는 콜백함수로 지연시간 뒤에 실행될 코드를 작성한다.

또한, delay는 지연시간으로 밀리세컨드 단위로 설정한다.

 

 

setTimeout 함수는 보편적으로 사용되는 함수이지만 특히 아래 상황에서 많이 사용된다.

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

 

setTimeout()는 일정시간 후 한번만 호출되지만 반복적으로 실행되기 원할땐 setInterval()를 사용한다.

 

 

 

 

2. clearTimeout() 

clearTimeout()를 이용하면 setTimeout(), setInterval()로 실행되는 함수를 해제, 종료할 수 있다.

var myTimer = setTimeout(function() {
//코드작성
}, 3000);

clearTimeout(myTimer);

 

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout