[ 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); 처럼 해서 사용하시면 됩니다.
'개발 > Javascript' 카테고리의 다른 글
이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기 (0) | 2017.06.11 |
---|---|
JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop) (0) | 2017.06.11 |
4. script 선언의 위치?!! (0) | 2017.06.11 |
2. JQuery로 선택한 태그 요소의 값과 속성을 바까보자 (3) | 2017.06.11 |
1. window 객체에 대하여...(부모창, 자식창 간에 데이터 주고 받기 포함) (0) | 2017.06.11 |