[JS] setInterval()과 setTimeout() 함수

setInterval()

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나,

어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있다.

이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있다.

 

setInterval() 함수는 원하는 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

 

사용법

setInterval( 함수명, 시간 );

 

예를 들어 현재 시간을 1초 간격으로 출력하고 싶다면

const getClock= () => {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
};

getClock();
setInterval(getClock, 1000);

(* 자바스크립트에서 1초는 1000이다.)

---

setTimeout()

코드를 작성할 때 어떤 코드는 지금 당장 실행하는 것이 아니라

일정 시간 후에 실행하는 코드일 수 있다.  

이럴 때 사용하는 함수가 setTimeout()이다.

 

setTimeout()은 원하는 시간 후에 코드를 실행시키는 역할을 한다.

 

사용법

setTimeout( 함수명, 시간 )

(setInterval과 굉장히 유사하다.)

 

예를 들어 5초 후에 Hello라는 텍스트를 보여주고 싶을 때

const getClock= () => {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
};

const sayHello=()=>{
    console.log("Hello");
}
getClock();
setInterval(getClock, 1000);

setTimeout(sayHello, 5000);