[javascript]for loop 안에서 인터벌 주기.

길이가 5인 배열이 있다고 가정하고

var arr = [1,2,3,4,5];

일정 주기를 가지고 리스트의 안의 데이터를 순차적으로 꺼내 무언가의 기능을 실행해야할 경우


for(var i in arr){
     (function(index){
           setTimeout(function(){
                 console.log(arr[index]);      
           },5000);
     })(i)
}

위와같이 자가 실행함수를 이용해서 했으나
5초뒤에 1,2,3,4,5 가 한번에 출력되어 원하는 결과를 얻지 못했다.

var arr = [1,2,3,4,5];
var inter;
for(var i in arr){
    (function(index){
          inter = setInterval(function(){
                console.log(arr[index]);      
          },5000);
    })(i)
    clearInterval(inter);
}

위와 같은 코드도 역시 안됨 (콘솔자체가 찍히지 않음)

갖가지 방법을 동원해 봤지만 하드코딩으로 하지 않는한 for 루프를 이용해서
원하는 결과를 얻는것은 불가능 했다.



* 해결방법

for 루프를 걷어내고 재귀 함수를 이용하여 반복실행을 하게끔 한후 setTimeout 으로
간격을 줌.



var arr = [1,2,3,4,5];

//자가 실행함수 초기 파타미터 0 을 받는다.
(function forLooper(i) {

setTimeout(function() {

                //console.log(arr[i]);
               
                // i 값에 1을 더한후 길이 체크를 한다.
if ( arr.length > ++i ){
                        //배열의 다음 인덱스 값에 접근하기 위해 재귀호출
forLooper(i);
}else{
        //배열의 인덱스 값을 5초마다 console.log 를 통해 출력후
                        //후행되어야 할 로직이 있다면 이부분에 추가.
}
}, 5000)
})(0); //처음 시작값으로 0 을 넘김.


삽질한 결과 해결.

퍼가실때 댓글좀 달아주세용~~~~