JavaScript_setTimeout과 setInterval

setTimeout

일정 시간이 지난 후에 함수를 호출한다.

useEffect(() => {
	setTimeout(action, 1000);
}, []);

const action = () => {
	console.log('action!!!');
};

페이지 로드 시 1000ms가 지난 후 action 함수가 실행된다.

setInterval

일정 시간의 간격을 두고 주기적으로 호출한다.

따라서 함수 호출을 중단하기 위해서는 clearInterval을 사용해야 한다.

 const [number, setNumber] = useState(0);
 
 let start = 0;
 let end = 100;
 let timer = setInterval(() => {
   start += 1;
   setNumber(start);
   if (start === end) {
     clearInterval(timer);
     return;
   }
 }, 0);

start가 0에서부터 0ms의 간격으로(아주 빠르게) 1씩 증가하는데, 100이 되면 clearInterval이 실행되며 멈춘다.

---

참고

setTimeout과 setInterval을 이용한 호출 스케줄링