자바스크립트에서 뭔가 반복하고 싶을땐 setInterval 또는 setTimeout을 사용한다.
다른 언어와 마찬가지로 for, while문 등을 사용할 수 있지만, setInterver과 setTimeout은 일정한 시간 간격을 두고 반복해서 수행한다.
차이점은 for,while문은 해당 구문이 호출되는 순간 결과값이 출력되지만 setInterval 과 setTimeout은 시간마다 해당 구문을 반복해 웹브라우저가 실시간으로 변하는 액션을 취한다는 점에서 큰 차이가 존재한다.
setInterval과 setTimeout
두 함수의 차이점은 다음과 같다.
- setInterval : 해당 함수를 불러오면서 일정 시간마다 반복해서 실행
- setTimeout : 일정 시간이 지난 후 함수를 반복해서 실행
사용 예시 코드는 다음과 같다.
함수의 시간 단위는 ms이며, 1000 단위가 1초를 의미한다.
const clock = document.querySeletor("#date");
function getClock(){
const date = new Date();
clock.innerText = `${date}`;
}
getClock();//화면 시작하자 마자 바로 띄워주기 위해서 호출함
//1000단위가 1초
setInterval(getClock, 1000);
setTimeout(getClock, 5000);
반복실행하는 함수를 멈추기 위해선 clearInterval() 함수를 사용하면 된다.
clearInterval("멈출 함수이름");
시계 만들기
setInterval는 시계같은 걸 만들때 유용하게 사용할 수 있다.
시계 구현을 위해 HTML을 만들자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum</title>
</head>
<body>
<h1 id="clock">00:00:00</h2>
<script src="index.js" defer></script>
</body>
</html>
실행해보면 00:00:00만 출력되고 있다.
여기에 setInterval을 넣은 JS를 작성해보자.
querySelector로 HTML의 [clock]id를 가지고 있는 요소를 가져온다.
그리고 new Date();함수로 현재 날짜와 시간을 가져와서 각각 시간, 분, 초를 따로 변수에 저장한다.
그리고 innerText로 현재 시간으로 변경해준다.
여기서 setInterval 함수의 기능으로 1초마다 시간이 변하게 된다.
const clock = document.querySelector("#clock");
function getClock(){
const date = new Date();
const hours = String(date.getHours());
const minutes = String(date.getMinutes());
const seconds = String(date.getSeconds());
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
실행해보면 전자시계처럼 잘 작동한다.
여기서 00:00:00 형식에 맞춰 출력하려면 padStart()함수를 사용하면 된다.
padStart 사용방법
padStart는 현재 문자열의 시작을 지정한 문자열로 채워 원하는 길이로 출력하는 함수다.
시계는 두자리로, 앞에 값이 없을땐 0으로 시작하므로 .padStart(2,"0");을 붙여주면 원하는 시계 형식을 만들 수 있다.
const clock = document.querySelector("#clock");
function getClock(){
const date = new Date();
const hours = String(date.getHours()).padStart(2,"0");
const minutes = String(date.getMinutes()).padStart(2,"0");
const seconds = String(date.getSeconds()).padStart(2,"0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
JS 수정 후 확인해보니 잘 동작한다.
'Develop > Frontend' 카테고리의 다른 글
| [JS] 랜덤숫자(난수) 생성 & 이미지 랜덤 생성 (0) | 2024.07.03 |
|---|---|
| [JS] 사용자 입력 값(input 등) 가져오기 & 새로고침 이벤트 막기 (0) | 2024.07.02 |
| [JS] HTML 태그 가져오기와 Event (0) | 2024.07.02 |
| [JS] JavaScript 기초 (0) | 2024.07.02 |
| [JS] 자바스크립트 시작하기 - Visual Studio Code (0) | 2024.07.02 |
