setTimeout

setTimeout()는 일정 시간이 지난 후 함수를 실행하는 함수입니다.

첫 번째 인수는 함수를, 두 번째 인수는 일정 시간을 전달 받습니다.

function fn() {
  console.log(3)
}

setTimeout(fn, 3000); // fn을 3000ms(3초) 후에 실행합니다.

만약 세 번째 인수까지 사용할 경우 첫 번째 인수를 통해 실행되는 함수의 인수로 사용됩니다.

function showName(_name) {
  console.log(_name)
}

setTimeout(showName, 3000, "jhkim"); // "jhkim"

clearTimeout()를 통하여 예약된 함수를 취소할 수 있습니다.

setTimeout()는 Timer ID를 반환하며, 이를 기준으로 취소할 수 있습니다.

function showName(_name) {
  console.log(_name)
}

const tId = setTimeout(showName, 10000, "jhkim");

clearTimeout(tId); // 10초가 지나기 전에 취소했기 때문에 아무런 값도 출력되지 않습니다.

setInterval

setInterval()는 일정 시간 마다 함수를 반복하여 실행하는 함수입니다.

사용 방법은 setInterval(), setTimeout() 모두 유사합니다.

function showName(_name) {
  console.log(_name)
}

const tId = setInterval(showName, 3000, "jhkim"); // 3초마다 "jhkim" 출력

setTimeout()에는 clearTimeout()가 가능하듯이 setInterval()에서는 clearInterval()를 통해 지정된(반복) 동작을 수행하지 않도록 할 수 있습니다.

function showName(_name) {
  console.log(_name)
}

const tId = setInterval(showName, 3000, "jhkim"); // 아무것도 출력되지 않음

clearInterval(tId) // 3초 이후부터 jhkim이 3초 간격으로 반복 됨, 
// 반복되기 전에 해당 timer ID의 동작 수행을 취소 시킵니다.