JS - setInterval()/setTimeout() , Date() , padStart()/padEnd()

setInterval()

setInterval(function, milliseconds);

: 일정 시간 간격으로 작업 수행하기 위한 함수

-> 다음 작업 중지 : clearInterval()

const clock = document.querySelector(".js-clock");

function realTime() {
	const today = new Date();
    const hours = today.getHours();
    const minutes = today.getMinutes();
    const seconds = today.getSeconds();
    
    clock.innerText = `${hours}:${minutes}:${seconds}`;
};

realTime(); //00:00:00 보이지 않고 바로 보여지게끔 함수 불러오기
setInterval(realTime, 1000); //1초 간격으로 함수 실행

 

setTimeout()

setTimeout(function, delay);

: 의도적으로 일정 시간 후에 실행하고 싶을때 사용하는 함수

-> 다음 작업 중지 : clearTimeout()

 

<대표적 사용 예시>

1. 접속 후 일정 시간 후에 팝업, 배너창 띄우기

2. 스크롤이 일정 위치에 올 경우, 일정 시간 후에 애니메이션 실행

3. 검색창 또는 일부 섹션 몇 초뒤에 사라지게 하기

4. 사이트 접속 후 일정 시간 후에 구독 신청 팝업창 띄우기 등등

 

Date()

new Date() 

: 현재 날짜 및 시간

new Date('2022-11-03 21:10:01') // 2022년 11월 3일 21:10:01

: getHours()/getMinutes()/getSeconds()

 

padStart(자리수, "대체string")

: 현재 문자열의 시작을 다른 문자열로 채워 주어진 길이를 만족하도록 반환

: number는 안되므로 string 변환 후 사용.

const clock = document.querySelector(".js-clock");

function realTime() {
	const today = new Date();
    const hours = String(today.getHours()).padStart(2, "0");
    const minutes = String(today.getMinutes()).padStart(2,"0");
    const seconds = String(today.getSeconds()).padStart(2, "0");
    
    clock.innerText = `${hours}:${minutes}:${seconds}`; //padStart로 17:22:1 -> 17:22:01
};

realTime(); //00:00:00 보이지 않고 바로 보여지게끔 함수 불러오기
setInterval(realTime, 1000); //1초 간격으로 함수 실행

 padEnd(자리수, "대체string")

: 현재 문자열의 마지막을 다른 문자열로 채워 주어진 길이를 만족하도록 반환