setInterval()
JavaScript의 setInterval() 함수는 일정한 시간 간격(interval)으로 지정된 함수를 반복적으로 실행하는 기능을 제공합니다. 이 함수는 두 개의 인자를 받습니다. 첫번째 인자는 실행할 함수, 두번째 인자는 실행 간격(밀리초 단위)입니다.
다음은 setInterval() 함수를 사용하여 "Hello!"를 1초마다 출력하는 간단한 예제입니다.
See the Pen setInteval() by saladent (@saladent) on CodePen.
위 코드에서 sayHello 함수는 1초마다 한 번씩 실행되며, 그 결과로 콘솔에 "Hello!"가 출력됩니다.
setInterval() 함수가 실행되면, 지정된 함수가 실행되고 지정된 간격마다 반복적으로 실행됩니다.
clearInterval()
setInterval() 함수가 실행되고 있을 때, clearInterval() 함수를 사용하여 반복을 중지할 수 있습니다.
이 함수는 setInterval() 함수로부터 반환된 타이머 식별자를 인자로 받아 실행됩니다. 이를 통해 원하는 시점에 반복을 중지시킬 수 있습니다.
아래 예제는 setInterval()과 clearInterval()을 함께 사용하여 카운트다운을 구현하는 간단한 예제입니다.
See the Pen Untitled by saladent (@saladent) on CodePen.
이 예제에서는 10부터 시작하여 0에 도달할 때까지 1씩 감소하는 카운트다운을 구현합니다.
setInterval()을 사용하여 1초마다 countdown() 함수가 호출되며, clearInterval()이 호출되어 반복이 중지됩니다.
setTimeout()
JavaScript의 setTimeout() 함수는 지정된 시간이 경과한 후에 한 번만 특정 함수를 실행하는 기능을 제공합니다.
이 함수는 두 개의 인자를 받습니다. 첫번째 인자는 실행할 함수, 두번째 인자는 실행을 지연할 시간(밀리초 단위)입니다.
예를 들어, 다음은 setTimeout() 함수를 사용하여 3초 후에 "Hello!"를 출력하는 간단한 예제입니다.
See the Pen setTimeout() by saladent (@saladent) on CodePen.
위 코드에서 sayHello 함수는 3초 후에 한 번 실행되며, 그 결과로 콘솔에 "Hello!"가 출력됩니다.
setTimeout() 함수가 실행되면, 지정된 시간이 경과한 후에 한 번만 함수가 실행됩니다.
setInterval()과 setTimout() 차이
따라서 사용하고자 하는 목적과 실행 동작에 따라 setInterval()과 setTimeout()을 선택하면 됩니다.
일반적으로 반복적인 작업을 수행해야 하는 경우에는 setInterval()을 사용하고, 딜레이 후에 특정 작업을 한번만 수행해야 하는 경우에는 setTimeout()을 사용하는 것이 좋습니다.