setTimeout() , setInterval() 함수

🎃 setTimeout()

• 시간 지연 함수, 일정 시간 뒤 (코드 또는 함수) 실행
• 일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수

기본 문법

setTimeout( function() {
	      // 호출될 콜백함수(지연시간 뒤에 실행될 코드를 설정)
           }, delay time );


setTimeout( () => {
             // 호출될 콜백함수(지연시간 뒤에 실행될 코드를 설정)
           }, delay time );

💡 활용 예제

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

setTimeout(function() {
  	console.log('Works!');
}, 3000);



// 1초의 지연시간 설정 예제

setTimeout(() => {
  	loading.remove();
  	countdown.style.display = 'flex';
}, 1000);

🎃 setInterval()

• 일정시간마다 반복해서 코드 또는 함수를 실행
• '일정 시간 간격으로 배너광고를 바꾸면서 보여줄 경우' 등에서 주로 활용

기본 문법

setInterval( 호출될 콜백함수, delay time );

💡 활용 예제

// 1초의 지연시간 설정 후 코드(updateCountdown) 반복 예제

setInterval(updateCountdown, 1000);

🎃 clearInterval()

• 타이머 함수(ex. setTimeout() )를 중지, 삭제하는 함수
• setTimeout() 함수를 변수에 담은 값을 clearInterval()함수에 담아준다

기본 문법

let stopRepeat = setTimeout( () => {
               	// 호출될 콜백함수(지연시간 뒤에 실행될 코드를 설정)
           	}, delay time );

clearInteral(stopRepeat)

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