jQuery 048. 반복 타이머 setInterval() ,clearInterval()

setInterval() 은 설정된 시간마다 반복되는 함수입니다. 먼저 사용법을 보면,

 

#code 01_01

setInterval(실행 함수 ,밀리초);
            
setInterval(function(){
	console.log("1초 마다 실행됩니다.");            
}, 1000);

setInterval()은 매개변수로 '실행될 함수'와 '시간'을 받습니다. 이때 시간은 밀리초로 설정해줍니다. 1000 밀리초는 1초, 60000 밀리초는 1분 입니다. 

 

#code 01_02

var 함수명 = setInterval(실행 함수 ,밀리초);

var timer = setInterval(function(){
    console.log("5초 마다 실행됩니다.");            
}, 5000);

setInterval()을 위와 같이 변수에 담을 수 있습니다. setInterval()을 변수에 담으면, clearInterval()을 통해 중지 시킬 수 있습니다.

 

#code 02_01

clearInterval(함수명);

 clearInterval()은 위와같이 매개변수로 함수를 받으며, 해당 함수는 종료됩니다. 아래는 사용법 입니다.

 

#code 02_02

var timer = setInterval(function(){
    console.log("1초 마다 실행됩니다.");            
}, 1000);

clearInterval(timer);

위와 같이 'timer' 라는 setInterval()을 생성한 뒤 clearInterval()을 통해 종료 시킵니다. #code 02_02은 'timer' 에서 설정된 시간보다, clearInterval()로 종료되는 시간이 더 빠르기 때문에 실행결과가 나오지 않게 됩니다. 아래는 조금 더 현실적인 예제입니다.

 

#code 02_02

var cnt = 0;        
var timer = setInterval(function(){
    cnt++;
    console.log("1초 마다 실행됩니다.",cnt);

    if(cnt == 5){
        console.log("종료 합니다.",cnt);
        clearInterval(timer);
    }
}, 1000);

같은 작업을 1초마다, 5번 한다고 가정할 때의 예제입니다. 변수 cnt를 생성해준뒤 작업을 반복할 때 마다 카운트를 해주고, 원하는 카운트에서 clearInterval()을 통해 종료해 줍니다. 다음 글에서는 setInterval() 과 clearInterval()을 활용해 타이머를 만들어 보겠습니다.