[JavaScript] 반복적인 코드 실행 setInterval, clearInterval

 

setInterval()

Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 setInterval() 을 사용한다.

setInterval() 함수는 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수이다. 

 

 

 

 

setInterval(function, delay millisecond, function parameters)

이 함수는 아래 매개변수를 입력 받습니다.

• function : 주기적, 반복적으로 실행할 함수
• delay millisecond (optional) : 시간 간격 (밀리세컨드 단위)
• function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터

 

이 함수는 리턴으로 intervalID 값을 반환합니다. 

이 값은 clearInterval()에 인자로 넣어 해당 setInterval() 함수를 멈추는 데 사용합니다. 

 

 

 

delay 에 0을 넣는 경우

setTimeout(function () {
	console.log(2)
}, 0);

console.log(1);

// 1
// 2

0을 넣었는데도 2,1 이 찍히는 게 아니라 1,2 순으로 찍히는데,

이유는 스크립트가 종료된 이후 스케줄링 함수가 실행되기 때문입니다.

그리고 브라우저는 기본적으로 4ms 정도의 대기시간이 있기 때문에,

0이라고 적어도 4ms 또는 그 이상이 걸릴 수 있습니다. 

 

 

특정 기간 동안 setInterval 을 실행하고 싶은 경우

 

let num = 0;

function showTime() {
	console.log(" ${num++}초 지났습니다.");
    // 5초 후 실행 종료하고 싶어서 num > 5 일 때 clearInterval() 실행
	if (num > 5) {
    	clearInterval(tID);
    }
}

const tID = setInterval(showTime, 1000);