setTimeout() , clearTimeout() , setInterval()

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

setTimeout() 함수의 내부에 위치한 코드 function(){Code here}은 콜백함수로 지연시간 뒤에 실행될 코드를 설정한다. 지연시간은 밀리 세컨드 단위로 설정해야한다 (ex, 1000은 1초 , 10000 10초) 

만약 3초 뒤에 실행되야 한다면 아래와 같이 설정한다. 

 

setTimeout(function(){

    console.log('Works');

},3000);

 

//3초뒤에 함수가 실행됨 

 

숫자타입의 값이 반환됨. 실행을 중지할 경우, 남아있는 시간을 해제할 경우 clearTimeout()을 설정해야한다. 

예를들어 

 var myTimer = setTimeout(function(){

     //Timer Codes 

  },3000);

 clearTimeout(myTimer); <--이런식으로  남은 시간을 해제, 삭제를 해야한다 

 

언제 많이 쓰일까?

1. 접속 후 몇 초 후에 팝업 또는 배너창을 띄울때 

2. 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션이 실행 

3. 검색창 또는 일부 섹션 및 초 뒤에 사라질 경우 

4. 방문자 접속 후 20-30 초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울경우 

 

만약 일정시간마다 반복되는 함수를 찾는다면 setInterval()을 사용하자