자바스크립트 반복 함수 실행

구현을 하다보면 반복 함수를 실행해야 할 필요가 생긴다.
사용하는 방법중 대표적인 방법으로는 setInterval과 setTimeout이 있다.

setInterval

일정 시간을 기준으로 두고 반복!

let timerId = setInterval(() => alert('hello'), 2000); // 2초마다 출력

setTimeout

일정 시간 후 함수 실행하는 것으로 예제는 다음과 같다.

function hello() {
  alert('안녕하세요.'); // 1초 뒤 출력
}

setTimeout(hello, 1000);

반복 함수 실행 시 차이

setInterval

1. 순차적 실행을 보장하지 않음 : 1000ms 마다 호출한다고 가정할 때, 첫번재 함수 연산이 1000ms가 넘어가면, 첫번째 함수가 끝나기 전에 두번째 함수 호출

setTimeout

setTimeout은 비동기 함수나 재귀함수를 이용해서 반복 함수를 구현하는데, 비동기함수는 비동기 완료 시점에 실행되는 것이 보장되어야 하는 코드는 콜백에 넣어야 한다.
재귀함수를 이용하는 방법은 for/while로 구현이 가능하기 때문에 잘 쓰이지 않는다. 특징은 아래와 같다.
1. 재귀를 시키는 코드가 setTimeout에 의해 매번 지연되어서 런타임 마비 걱정X
2. 함수의 순차적 실행 보장
3. 스택 영역에 할당된 메모리가 해제되지 않는 치명적 단점 가짐(재귀)

setTimeout으로 반복 함수 구현 시 주의사항

for(var i = 0; i < 10; i++) {
   setTimeout(function() {
      console.log(i);    
     //반복작업 구문 example => 10만 10번 출력(for문은 계속 돌고, setTimeout이 i를 찾을 때는 10만 남아있기 때문)
   }, 1000);

}

해결방법 1 : 내부에 함수를 하나 더 만들어서 i를 인자로 입력받기

이 방법은 필요한 갯수만큼 setTimeout을 다 만드는 것이기 때문에 효율성이 떨어진다.

function loop(x) {
	setTimeout(function() {
		console.log(x);
	}, 1000*x);
}

for (i = 0; i < 3; i++) {
	loop(i);
}

해결방법 2 : 재귀함수 사용

function start(counter){
	if(counter < 10){
		setTimeout(function(){
			counter++;
			console.log(counter);
			start(counter);
		}, 1000);
	}
}

start(0);