for 루프에서 settimeout 사용 시 index 문제

   저 말고도 자주들 하시는 실수 일거 같아서 정리해봅니다.

코드로 설명하겠습니다.

1. 테스트로 배열 생성 후 로깅

 //테스트 배열 생성
 var arr = [1,2,3,4,5];
 var count = arr.length;
 for(var i =0; i < count; i++) {
   //로그 출력
   console.log("index : " + i);
 }

결과 

순서대로 제대로 출력되는 것을 볼 수 있습니다.

2. for 루프에서 settimeout 실행

//테스트 배열 생성
var arr = [1,2,3,4,5];
var count = arr.length;
for(var i =0; i < count; i++) {
  setTimeout(function() {
    //로그 출력
    console.log("index : " + i);
  }, 100);
}

결과

잘못된 값 출력!~~~

3. 해결방법

  //캡쳐 하기
  var arr = [1,2,3,4,5];
  var count = arr.length;
  for(var i =0; i < count; i++) {
  	setTimeout((function() {
 	 	console.log("index : " + i);
  	})(i), 100);
  }

결과

정상적으로 출력됩니다.

settimeout 안에 함수를 ()(i)로 감싸주시면 됩니다.

사실 이 개념은 자바스크립트의 클로저 개념입니다.

실수를 하지 말자라는 취지로 가볍게 정리했습니다.

더 파고 싶은 신 분들은 클로저를 공부해보세요.

 

오늘도 편히 개발하세요