[JavaScript] setInterval(), setTimeout() & 현재시간 출력

[JavaScript] setInterval(), setTimeout()

 

 

자바스크립트에는 일정 시간 간격으로 함수를 실행하는 기능이 있다.

setInterval(), setTimeout() 메서드를 이용하면 된다.

 

setInterval()은 일정 시간 간격(interval)을 두고 함수를 실행하게 만드는 기능이고,

setTimeout()은 일정 시간이 지난 후에 함수를 실행하게 한다.

 

 

두 메서드의 문법은 아래와 같다.

setInterval(함수명, interval간격)
setTimeout(함수명, delay시간)

시간 간격의 기본 단위는 ms(밀리초)이다. (1000ms = 1s(초))

 

setTimeout 함수의 두 번째 파라미터에 다음과 같이 0을 넣으면

delay 시간이 0이 되므로 함수는 바로 실행 된다.

(엄밀히 말하면 0ms는 아니고 4ms 이후에 실행된다.

참고: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#Reasons_for_delays_longer_than_specified)

setTimeout(함수명, 0)

 

 

[JavaScript] 현재시간 출력

 

setInterval 메서드를 이용해 현재 시간을 출력할 수 있다.

 

getHours(), getMinutes(), getSeconds() 메서드를 이용해 각각 시간, 분, 초의 현재 값을 입력 받은 후,

이 메서드를 1초 간격으로 실행시키면 된다.

 

 

자바스크림트에서 현재시간을 출력하게 만드는 코드는 아래와 같다.

getClock();    // 현재 시간이 바로 뜨도록
setInterval(getClock, 1000);    //1초 간격으로 getClock() 메서드 실행

function getClock() {
    const date = new Date();
    클래스명.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}