setTimeout() vs setInterval() 을 비교해보자

Carousel을 직접 구현하려고 했을때
React에서 어떤걸 쓰는게 더 적합할지 고민했다.

우선
1. setTimeout()
2. setInterval()
두개를 생각했다.

우선 비교해보자.

---

setTImeout() : delay 된 시간만큼 기다린 후에 function을 실행한다.

일정 시간이 지난 후에 함수를 실행한다.

const timeoutId = setTimeout (function[,delay,arg1,arg2,...] );


//종료
clearTimeout(timeoutId);

1. setTimeout은 timeoutId를 리턴한다.
따라서 timeoutId로 생성한 타이머를 식별할 수 있다.
clearTImeout()에 전달해 타이머를 취소 할 수 있다.

 

2. 함수를 실행하지 않고 넘겨야한다.

setTimeout은 함수의 참조값을 받도록 정의되어있음

반환문이 없는 함수를 실행한다면 호출결과는 undefined되어 코드가 작동하지 않음

setTimeout(console.log("hi"),1000);
setTimeout(()=>console.log("hi"),1000);

---

setInterval() : 반복적으로 함수를 실행할때 사용한다.

일정시간 간격을 두고 함수를 실행한다. 

const IntervalID = setInterval(func,delay,arg,arg1,....);

//종료
clearInterval(intervalId);

---

차이점

1. setTimeout은 지연간격을 보장함 , setInterval은 보장하지 않는다.

 

setInterval은 function을 실행하는데 소모되는 시간도 지연간격에 포함시킨다.

setTimeout은 명시한 지연이 보장된다.