6. [Javascript] 일정 시간간격으로 함수 호출하기(with setInterval, setTimeout)

일정시간 간격을 두고 function을 호출해야할 때가 있습니다.

 

일정 시간에 주기적으로 호출하려고한다면 setInterval() 메서드를 사용하고,

일정시간 뒤에 한번만 호출하길 원한다면 setTimeout() 메서드를 사용하면 됩니다.

---

1. setInterval(function, delay);

• 일정시간 간격으로 호출하기

function sayHello() {
  console.log('안녕하세요!');
}

setInterval(sayHello, 1000); // 1초마다 sayHello 함수 호출

위의 코드에서 sayHello 함수는 1초마다 한 번씩 호출됩니다. 

웹 브라우저의 개발자 도구 콘솔에는 '안녕하세요!'가 매 초마다 출력될 것입니다.

 

• clearInterval() 메소드로 타이머 취소하기

var timerId = setInterval(sayHello, 1000); // 1초마다 sayHello 함수 호출

// 5초 후에 반복 실행 중지
setTimeout(function() {
  clearInterval(timerId);
}, 5000);

위의 코드에서 clearInterval 함수를 사용하여 timerId 타이머를 5초 후에 중지합니다.

setInterval을 사용으로 필요하지 않은 반복 실행을 지속하면 브라우저 성능에 영향을 줄 수 있으며, 작업이 더 이상 필요하지 않을 때는 clearInterval로 타이머를 중지하는 것이 좋습니다.

 

---

2. setTimeout(function, delay);

• 일정시간 뒤 한번만 호출

function sayHello() {
  console.log('안녕하세요!');
}

setTimeout(sayHello, 3000); // 3초 후에 sayHello 함수 호출

위의 코드에서 sayHello 함수는 3초 후에 한 번 호출됩니다. 

웹 브라우저의 개발자 도구 콘솔에는 '안녕하세요!'가 3초 후에 출력될 것입니다.
setTimeout 함수를 사용하여 일정 시간이 지난 후에 함수를 실행하는 경우, 해당 함수는 한 번만 실행됩니다.

 

• clearTimeout 으로 실행 취소하기

var timerId = setTimeout(sayHello, 3000); // 3초 후에 sayHello 함수 호출

// 2초 후에 타이머 취소
setTimeout(function() {
  clearTimeout(timerId);
}, 2000);

위의 코드에서 clearTimeout 함수를 사용하여 timerId 타이머를 2초 후에 취소합니다. 

이렇게 하면 sayHello 함수가 호출되기 전에 타이머가 취소되어 실행되지 않습니다.

 

---

활용하여 시계 만들기.

function getClock() {
  const date = new Date();
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = `${hour}:${minute}.${seconds}`;
}
setInterval(getClock, 1000);
//Interval 함수를 정해진 시간만큼 반복해서 호출하는 메소드
setTimeout(sayhello, 1000);
//정해진 시간뒤에 함수를 1번만 호출함

 

시계 만들기