'자바스크립트 타이머'에 해당되는 글 1건




자바스크립트에는 타이머 함수가 내장되어 있습니다. 

타이머 함수란 지정한 시간에 지정한 함수를 실행하게 하는 함수 입니다. 



■ 타이머 설정하기 ( setTimeout )


1
2
3
4
5
<script type="text/javascript">
    setTimeout(function(){
        alert('페이지  로딩 완료 후 3초가 지났습니다.');
    }, 3000);
</script>
cs



setTimeout 함수 내부에 function(){ ... } 과 3000 이라는  파라미터 값이 들어 왔습니다. 

function 내부는 실행할 함수를 정의 합니다. 

두번째 3000 이라는 값은 3000 밀리세컨드 후 function 함수에서 정의한 동작을 실행 시킨다는 의미 입니다. 

3000 밀리세컨드, 쉽게 이야기 해서 3초 후에 동작 시킵니다.


위 코드를 적용 후 페이지를 로드 하게 되면 페이지 로딩 완료 후 3초가 지나면 알림이 뜨게 됩니다. 




■ 타이머 취소하기 ( clearTimeout )


실행시킨 타이머를 취소 시키는 방법은 내장 함수인 clearTimeout 함수를 콜하면 됩니다. 이때 파라미터 값은 실행 취소시킬 setTimeout 의 ID 값을 넘겨 주면 됩니다. 


1
2
3
4
5
6
var clearTimerId = setTimeout(function(){
    alert('3초 후에 알람 동작');
}, 3000);
function stopTimer(){
    clearTimeout(clearTimerId);
}
cs


위와 같이 setTimeout 을 clearTimeId 라는 변수 형태로 지정을 해줍니다. 

이때 clearTimeId 라는 변수가 clearTimeout 함수를 호출 시 사용하게 되는 id 값이 됩니다. 


stopTimer() 함수를 선언하여 호출되는 시점에 clearTimeout(clearTimerId) 와 같이 실행하게 되면 setTimeout 함수가 실행 되지 않고 취소 되어 버립니다. 




 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,