[Javascript] 배열공부

함수

일정시간 뒤에 함수가 실행되게 하고싶을때는 ?

setTimeout( function () { ... }, delay);

어떤때 활용하는가 ? 

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

 

setTimeout(function() {
  alert('http://webisfree.com');
}, 3000);

 

 

 clearTimeout( ) ;

삭제하는 방법은 ?

• var clear = setTimeout(  ) =함수를 변수에 담고
• clearTimeout ( clear  ) = 함수에 변수를 넣어 멈춰준다.

var myTimer = setTimeout(function() {
  // Timer codes
}, 3000);

clearTimeout(myTimer);

 

일정시간마다 반복되게 하고싶을때는 ?

setInterval(function() { ... } , delay );

어떤때 활용하는가 ? 

• i. 갤러리 형식의 뷰를 만들어 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우(Carousel Gallery)
• ii. 일정 시간 간격으로 배너광고를 바꾸면서 보여줄 경우
• iii. 일정 주기로 계속해서 서버와 통신이 필요한 경우.

playAlert = setInterval(function() {
   alert('http://webisfree.com');
}, 3000);

claearInterval( );

삭제하는 방법은 ?

• var clear = setTimeout(  ) =함수를 변수에 담고
• clearTimeout ( clear  ) = 함수에 변수를 넣어 멈춰준다

playAlert = setInterval(function() {
   alert('http://webisfree.com');
}, 3000);

 

clearInterval(playAlert);

 

< 응용하기 >

<h2>clearInterval() 함수로 setInterval() 중지하기</h2>

<button onclick="startAlert();">setInterval()</button>
<button onclick="stopAlert();">clearInterval()</button>
startAlert = function() {
  playAlert = setInterval(function() {
    alert('http://webisfree.com');
  }, 3000);
};

stopAlert = function() {
   clearInterval(playAlert);
};

 

-----------------------------

마치며

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

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


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


@ 현재 웹페이지에 설정된 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 )