setTimeout , setInterval 시간 지연 관련 내장 함수

자바스크립트의 시간초와
1. setTimeout
2. setInterval

setTimeout

setTimeout(functionRef, delay, param1)

1. 기본 콜백 함수 functionRef
2. 지연시간 몇초후 해당 콜백을 보여줄지 delay 설정할 수 있다
3. param1 콜백함수에 전달하는 추가 인수

setTimeout(() => {
  console.log("첫 번째 메시지");
}, 5000);
// 첫 번째 메시지

기본 사용 예제

const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms));

async function example() {
  console.log("Start");
  await sleep(2000); // 2초 대기
  console.log("2 seconds later");
}

example();

응용 예제 동기적 실행을 위해
async await 문법을 사용하고
promise 를 사용해야 pendding 상태를 유지할 수 있다

setInterval

몇초에 걸쳐 반복할지 설정하는 내장 함수
보통 시계를 떠올리면 될 것 같음

setInterval(func, delay, arg0, arg1 , ...)

clearInterval(intervalID)
// 이전에 생성한 setinterval에 반복작업을 취소

콜백 함수 func
몇초에 딜레이를 주고 반복할 것인지 delay
타이밍이 완료되면 콜백 함수로 전달하는 추가 인수 arg0, arg1

함수를 실행하면 반복적으로 계속 돌아간다.
이를 중단해야 하기 때문에 clearInterval 로 반복 해제 해야한다.

const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");

function myCallback(a, b) {
  console.log("start interval")
  console.log(a);
  console.log(b);
}

clearInterval(intervalID)

콜백 함수 func
몇초 후외 반복 콜백함수를 실행 할 것인지 delay
콜백 함수로 전달하는 매개변수 prameter

setTimeout(() => {
  clearInterval(intervalID);
  console.log("Interval cleared");
}, 5000);

응용 인터벌을 종료하는 시간을 설정하는 경우 setTimeout 을 같이 사용한다

React useEffect 에서 사용하는 방법

  useEffect(() => {
    // 인터벌 설정
    const intervalId = setInterval(() => {
      console.log("start interval")
    }, 1000);

    // 정리 함수 반환
    return () => {
      clearInterval(intervalId); // 인터벌 정리
    };
  }, []); // 빈 배열: 컴포넌트가 마운트될 때 한 번만 실행

useEffect는 마운트될 때와 특정 값이 업데이트될 때 실행 하는 함수로

의존값이 업데이트 되면 중복 interval실행 됨으로
return을 통해 언마운트 될 때 clearInterval 로 interval 종료