JavaScript setInterval 함수란?
어떤 코드를 주기적으로 업데이트하거나 주기적으로 데이터를 받아야될때 사용한다.
ex)
setInterval( ()=>{console.log("1초 마다 반복실행됨")}, 1000);
JavaScript setTimeout 함수란?
어떤 코드를 일정 시간 기다린 후 실행해야하는 경우에 사용한다.
ex)
setTimeout( ()=>{console.log("1초 후에 실행됨")}, 1000);
setInterval 함수 활용 예제)
<body>
<h1>스탑워치 만들어보기</h1>
<p>
<strong id="min">0</strong>:
<strong id="sec">0</strong>:
<strong id="mSec">0</strong>
</p>
<button id="startBtn">시작</button>
<button id="resetBtn">재설정</button>
<button id="report">기록</button>
<ul id="msgList">
</ul>
<script>
let min=0, sec=0, mSec=0;
let isStarted = false;
// 시작 버튼을 눌렀을때 실행되는 코드
document.querySelector("#startBtn").addEventListener("click", (e)=>{
// 이벤트가 일어난 요소의 innerText 를 바꾸기
// 만일 시작된 상태 라면 "중단" 으로 바꾸고
if (isStarted) {
isStarted = false;
e.target.innerText = "시작";
} else {
isStarted = true;
e.target.innerText = "중단";
}
});
setInterval(()=>{
// 만일 시작된 상태가 아니라면 함수를 여기서 종료하기
if (isStarted==false) {
return;
}
// 1/100초 마다 한번씩 호출되는 함수
mSec++
if(mSec==100) {
sec++
mSec=0;
}
// sec가 60이 될때 min 값을 1증가시키고 sec를 0으로 초기화
if(sec==60) {
min++
sec=0;
}
// mSec, sec, min 값을 innerText으로 출력
document.querySelector("#mSec").innerText = mSec;
document.querySelector("#sec").innerText = sec;
document.querySelector("#min").innerText = min;
}, 10)
// 재설정 버튼을 눌렀을때 실행되는 코드
document.querySelector("#resetBtn").addEventListener("click", ()=>{
// min, sec, mSec 값을 0으로 초기화
min = 0;
sec = 0;
mSec = 0;
// mSec, sec, min 값을 innerText으로 출력
document.querySelector("#mSec").innerText = mSec;
document.querySelector("#sec").innerText = sec;
document.querySelector("#min").innerText = min;
// isStarted 상태를 false 으로 변경
isStarted = false
// startBtn의 innerText를 "시작"으로 변경
document.querySelector("#startBtn").innerText = "시작"
});
// 기록 버튼을 눌렀을때 실행되는 코드
document.querySelector("#report").addEventListener("click", ()=>{
// li 요소 생성
let li1 = document.createElement("li");
// li 요소의 innerText
li1.innerText = min+":"+sec+":"+mSec
// 위에서 만든 li 요소를 id 가 msglist 인 곳에 추가한다.(append)
document.querySelector("#msgList").append(li1);
})
</script>
</body>
</html>
시작 버튼을 클릭하였을때 00.00초 단위로 증가하며 "시작" 버튼의 innerText가 "중단"으로 변경된다.
중단 버튼을 클릭하였을때 증가하던 시간초가 멈추며 "중단" 버튼의 innerText가 "시작"으로 변경된다.
기록 버튼을 클릭하였을때 현재 스탑워치의 값들을 아래에 li요소를 추가하여 text으로 기록한다.
재설정 버튼을 클릭하였을때 현재 스탑워치의 값들이 초기화 된다.
'JavaScript' 카테고리의 다른 글
| JavaScript Const (0) | 2023.05.02 |
|---|---|
| JavaScript canvas 함수 (0) | 2023.05.02 |
| JavaScript map 함수 (0) | 2023.04.27 |
| JavaScript filter 함수 (0) | 2023.04.27 |
| JavaScript EventListener (0) | 2023.04.17 |
