[Javascript] 함수 setInterval()

이 글은 노마드 코드 영상을 보고 배운 것을 정리한 글입니다.

노마드 코더 영상 링크

---

setInterval()

• 형식 : setInterval(fn,millisecond)
• 함수를 일정 시간마다 실행시켜주는 함수이다.

예시 - clock

//HTML 에서 쓰여질 곳을 가져옴
const clockContainer = document.querySelector(".js-clock"),
     clockTitle = clockContainer.querySelector("h1");

// 시간 함수
function getTime(){
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes<10 ? `0${minutes}` : minutes }:${
        seconds<10 ? `0${seconds}` : seconds }`;

}
function init(){
    getTime();
    setInterval(getTime,1000); // 1초마다 getTime함수를 실행하겠다.
}

init();

위 처럼 1초마다 getTime함수를 실행시켜줌으로써 Date를 1초마다 갱신하고, 이를 화면에 띄움으로써 시계처럼 동작하게 해준다.
또한, 삼항연산자를 이용해서 10 이하면 앞에 0을 붙여서 자리수를 맞추어 주었다.