자바스크립트 setInterval() 함수 사용하는 방법

setInterval() 는 JavaScript에서 특정 시간 간격으로 함수를 반복 실행하기 위해 사용되는 함수입니다. setInterval() 함수를 사용하여 주기적으로 작업을 수행하거나 반복 작업을 예약할 수 있습니다. 이것은 웹 애플리케이션에서 비동기 작업, 애니메이션 및 주기적 데이터 업데이트와 같은 시나리오에서 유용하게 활용할 수 있습니다.

 

  

◎ 1. setInterval() 함수

 

setInterval() 함수는 function으로 지정된 함수를 delay로 지정된 시간 간격(밀리초)으로 반복 실행합니다. 선택적으로, 추가 매개변수 param1, param2, ... 를 함수에 전달할 수 있습니다.

 

setInterval(function, delay, param1, param2, ...)

l  function (함수, 필수): 실행할 함수 또는 함수 표현식입니다.

l  delay (정수, 필수): 함수 실행 간격을 밀리초로 지정합니다.

l  param1, param2, ... (선택적): 함수에 전달할 추가 인수 (인수가 필요한 경우).

 

 

◎ 2. 사용 예제

 

(1) 기본 setInterval() 사용

 

let count = 0;
const intervalId = setInterval(function() {
    count++;
    console.log("카운트: " + count);
}, 1000); // 1초마다 실행
 
[출력]
카운트: 1
카운트: 2
카운트: 3
카운트: 4
카운트: 5
카운트: 6
....

  

예제에서 setInterval() 함수는 1초마다 주어진 함수를 실행하고, 함수는 count 변수를 증가시키고 현재 카운트를 콘솔에 출력합니다. intervalId는 나중에 중지시킬 때 사용할 아이디 입니다.

 

(2) 함수에 인수 전달

 

function greet(name) {
    console.log("안녕하세요, " + name + "님!");
}
 
setInterval(greet, 2000, "John"); // 2초마다 "John"을 인수로 함수 실행
 
[출력]
안녕하세요, John님!
안녕하세요, John님!
안녕하세요, John님!
....

  

예제에서 setInterval() 함수는 2초마다 greet 함수를 호출하고, "John"을 인수로 전달하여 함수를 실행합니다. 파라미터로 실행할 함수 인수를 전달하는 예제입니다.

 

(3) clearInterval() 사용해서 반복 중지

 

let count = 0;
const intervalId = setInterval(function() {
    count++;
    console.log("카운트: " + count);
    if (count >= 5) {
        clearInterval(intervalId); // 5번 실행 후 중지
    }
}, 1000); // 1초마다 실행
 
[출력]
카운트: 1
카운트: 2
카운트: 3
카운트: 4
카운트: 5

  

예제에서 setInterval() 함수는 1초마다 함수를 호출하고 count 변수 값이 증가합니다. 그러나 clearInterval() 함수를 사용하여 count가 5 이상이 되면 반복을 중지합니다.