[TIL] setInterval()

setInterval()

Window 및 Worker인터페이스에서 제공되는 setInterval() 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행한다.

이 메서드는 간격(Interval)을 고유하게 식별할 수 있는 interval ID를 반환하므로 나중에 clearInterval()함수를 호출하여 제거할 수 있습니다.

이게 TIL의 주제를 setInterval로 쓰게 된 이유이다. 캐러셀을 만들면서 자동으로 아이템 넘기기를 구현하던 도중

  const startCarousel = () => setInterval(showNextItem, 5000);

  let carouselInterval = startCarousel();

  const stopCarousel = () => clearInterval(carouselInterval);

이 코드에서 의문이 생겼다. 왜 캐러셀 시작함수를 따로 할당해줄까 생각했는데 intevalID를 반환하기 때문인 것을 알게 되었다. intervalID를 할당하여 clearInterval을 통해 제거할 수 있는 것이었다.

구문

setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg0)
setInterval(func, delay, arg0, arg1)
setInterval(func, delay, arg0, arg1, /* … ,*/ argN)

매개변수

• func
  delay(밀리초)마다 실행되는 function이다. 첫 번째 실행은 delay()(밀리초)후에
  발생한다.
• code
  선택적 구문으로 사용하면 함수 대신 문자열을 포함할 수 있다. 모든 delay()(밀리초)마다 컴파일되고 실행된다.
  
• delay (optional)
  타이머가 지정된 함수 또는 코드 실행 사이에 지연해야 하는 밀리초 단위의 시간이다. 지정하지 않으면 기본값은 0이다.
  
• arg0, ..., argN (optional)
  타이머가 만료되면 func에서 지정한 함수로 전달되는 추가 인수이다.
  

반환 값

반환된 intervalID는 setInterval() 호출로 생성된, 타이머를 식별하는 0이 아닌 숫자 값이다. 이 값은 clearInterval()에 전달되어 interval을 취소할 수 있다.

사용할 함수는 MDN에서 잘 읽어 보도록 하자.

출처: https://developer.mozilla.org/ko/docs/Web/API/setInterval