자바스크립트에는 타이머 함수가 내장되어 있습니다.
타이머 함수란 지정한 시간에 지정한 함수를 실행하게 하는 함수 입니다.
■ 타이머 설정하기 ( 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
'javascript' 카테고리의 다른 글
[ 자바스크립트 프로그래밍 ] 텍스트 잘라내기 및 붙여넣기 (cut and paste) (1186) | 2018.07.26 |
---|---|
[ 자바스크립트 프로그래밍 ] 텍스트를 클립보드에 복사(copy)하기 (1168) | 2018.07.25 |
[ javascript 코딩 ] 자바 스크립트 - 데이터 유형 (1207) | 2018.05.31 |
[ javascript 코딩 ] Variable scope (1209) | 2018.05.23 |
[ javascript 코딩 ] 자바스크립트 재미있게 배우는 사이트 (1528) | 2018.05.21 |