[    3. 일정주기마다 callback 함수를 실행하는 setInterval()에 대해서...    ]



Callback Function

  • 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수

시간을 기반으로 콜백함수를 호출하는 명령

setTimeout( function, time )

  • time 시간이 지난 경우 function 함수를 콜백하는 함수
  • time 은 millisecond (1/1000초) 단위
  • timerId를 반환함

clearTimeout( timerId )

  • setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소
    • 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음

setInterval( function, time )

  • time 시간이 경과할 때마다 function 함수를 콜백하는 함수
  • timerId를 반환함

clearInterval( intervalId )

  • setInterval 함수 호출의 결과로 반환된 intervalId를 인자로 받아 주기적으로 호출되던 function 호출을 취소


다음 예시 사진을 보면, setTimeout을 호출 했을 때 3초뒤에 callback()으로 지정한 함수가 실행된 것을 알 수 있습니다.


이때, 142를 반환했는데 이것은 setTimeout의 id라고 생각하시면 되고 지정한 setTimeout을 해제하기 위해서는 clearTimeout(setTimeout의 id)를 넣어주어야 취소가 가능합니다.


다음으로


setInterval ( 수행할 메서드, 시간) 으로 여기선 5초 마다 콜백 메서드를 수행하도록 되어 있습니다. 이것을 해제하기 위해서는 역시 callback 메서드의 id가 143번 임으로


clearInterval(143)을 통해 해제 시켜 준 것을 알 수 있습니다.


콘솔에서는 id가 몇번인지 알 수 있지만 코드상에서 작성할 때에는 바로바로 확인이 어려움으로


var setIntervalId = setInterval(callback, 5000);

clearInterval(setIntervalId); 처럼 해서 사용하시면 됩니다.



+ Recent posts