728x90
[자바스크립트 / Javascript] 타이머 / 카운트 다운 / 멈추기
setInterval : 일정 시간 (millisecond) 마다 반복하여 함수 실행
clearInterval : 일정 시간 마다 반복되는 setInterval 실행 종료
기본 형태
//1000밀리세컨드 (1초) 마다 콜백함수 실행
let play = setInterval(콜백함수,1000);
//play 멈추기
clearInterval(play);
샘플 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>타이머 시작 / 멈춤 예제</title>
</head>
<body>
<input type="button" class="timer" value="Start Timer">
<script>
//버튼 엘리먼트 Selector
const stopBtn = document.querySelector('.timer');
//현재 시간 (sec)
let currentSecond = 10;
//타이머 변수
var playTimer;
//타이머 실행시 반복 실행 되는 콜백 함수
const playHandler = () => {
currentSecond = currentSecond - 1;
if(currentSecond === 0){
console.log('땡!');
clearInterval(playTimer);
}
console.log(currentSecond + '초 남았습니다');
};
//타이머 버튼 클릭시
//타이머 시작 / 타이머 멈춤
stopBtn.addEventListener('click',e=>{
if(e.target.value==="Start Timer"){
playTimer = setInterval(playHandler,1000);
e.target.value='Stop Timer';
}else {
clearInterval(playTimer);
currentSecond = 10;
e.target.value = 'Start Timer';
}
});
</script>
</body>
</html>
실행 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 다른 자바스크립트 파일 불러오기 Export / Import (0) | 2021.06.07 |
|---|---|
| [Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() (0) | 2021.06.02 |
| [Javascript] 이벤트 버블링 방지 stopImmediatePropagation (0) | 2021.05.25 |
| [Javascript] 클래스 추가 / 삭제 / 포함 여부 확인 classList.(add/remove/contains) (0) | 2021.05.24 |
| [Javascript] 자식 엘리먼트 / 노드 / 태그 추가 append (0) | 2021.05.24 |
댓글