바닐라 JS로 크롬앱 만들기 [4-2] Timeouts & Dates

Timeout

• 함수를 한번만 호출하는데 일정시간 흐른 뒤에 호출
• 명령어 : setTimeout

기본 문법

setTimeout(function_name, ms)

첫번째 인자 : 실행하고자 하는 함수 이름
두번째 인자 : 실행 간격, ms(milliseconds)로 표기

예제

function sayHello() {
    console.log("hello");

}

setTimeout(sayHello, 5000);

5초뒤에 콘솔에 hello 호출

---

Dates

• 콘솔에 new Date() 입력 시 호출 당시 현재 날짜, 시간 확인
• 매 초마다 date안에 있는 함수들을 호출해서 시계 만들기 가능

콘솔

---

⟩ const date = new Date();

⟩ date.getDate()

< 16

⟩ date.getDay()

< 0 (일요일은 0)

⟩ date.getFullYear()

< 2023

⟩ date.getHours()

< 12

⟩ date.getMinutes()

< 18

⟩ date.getSeconds()

< 35

---

시계 만들기

내가 해본 것

const clock = document.querySelector("h2#clock");
const date = new Date();
function getClock() {
    console.log(date.getHours());
    console.log(date.getMinutes());
    console.log(date.getSeconds());

}

setInterval(getClock, 1000);

문제점 : 현재 시간이 아니라 고정된 시간만 출력

강의에서 한 것

const clock = document.querySelector("h2#clock");
function getClock() {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

setInterval(getClock, 1000);

12:31:23
12:31:24... 잘 작동
문제점 :
1. 새로고침 했을 때 1초 기다려야 시간을 알려주기 시작
2. 시간이 01, 02, 가 아닌 1,2 이렇게 시작함

[문제1 해결]

getClock을 호출하면 바로 실행됨

const clock = document.querySelector("h2#clock");
function getClock() {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
getClock();
setInterval(getClock, 1000);

[문제2 해결]

padStart 사용(string에 사용 가능)
padStart는 문자열에만 사용이 가능해서 String() 으로 감싸줌

const clock = document.querySelector("h2#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);

clock.innerText 이용해서 실시간으로 시간 업데이트 해줌