Javascript에서 setInterval 함수는 일정한 간격으로 함수를 반복해서 실행하는 기능을 제공합니다. 주로 애니메이션, 실시간 업데이트 및 타이머와 관련된 작업에 사용됩니다.

이 함수의 기본 문법은 다음과 같습니다.

setInterval(함수, 시간간격)

• 함수: 일정한 간격으로 반복해서 실행될 함수를 작성합니다.
• 시간간격: 함수를 실행할 간격을 밀리초로 지정합니다.

예를 들어, 1초마다 “Hello, world!”를 출력하는 예제 코드는 다음과 같습니다.

function sayHello() {
  console.log("Hello, world!");
}

setInterval(sayHello, 1000);

이렇게 작성된 코드는 sayHello 함수를 1초마다 실행하여 “Hello, world!”를 콘솔에 출력합니다. setInterval 함수는 페이지를 닫거나 명시적으로 멈추기 전까지 계속 실행됩니다.

clearInterval 함수로 반복 실행 멈추기

setInterval 함수로 실행되는 반복 작업을 멈추고 싶을 때는 clearInterval 함수를 사용합니다. clearInterval 함수는 setInterval 함수를 호출할 때 반환되는 고유한 값, 즉 “타이머 ID”를 매개변수로 받아 실행을 멈춥니다.

예를 들어, 아래의 코드는 5초 후에 “Hello, world!”를 3번 출력하고 타이머를 멈추는 예제입니다.

let count = 0;

function sayHello() {
  console.log("Hello, world!");
  count++;

  if (count === 3) {
    clearInterval(timer);
  }
}

let timer = setInterval(sayHello, 1000);

이렇게 작성된 코드는 sayHello 함수를 1초마다 실행하고, count 변수를 증가시켜 3번 출력한 후에 clearInterval 함수로 타이머를 멈춥니다.

주의: setInterval 함수의 반환 값을 반드시 변수에 저장해야 clearInterval 함수를 사용할 수 있습니다.

요약

setInterval 함수는 일정한 간격으로 함수를 반복해서 실행하는 기능을 제공하며, clearInterval 함수로 실행을 멈출 수 있습니다. 이를 활용하여 애니메이션과 실시간 업데이트 등 다양한 작업에 유용하게 사용할 수 있습니다.

더 자세한 내용은 MDN 문서를 참고하시기 바랍니다.

• setInterval - MDN
• clearInterval - MDN