[ 자바스크립트 프로그래밍 ] 자바스크립트 타이머 setTimeout

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

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

■ 타이머 설정하기 ( setTimeout )

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

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

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

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

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

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

■ 타이머 취소하기 ( clearTimeout )

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

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

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

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

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

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

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

감사합니다 :D