본문 바로가기

javascript/jQuery

javascrpt - 내장 함수 [타이머 함수③]

앞에서 예고했듯이 이번에는 반복문과 콜백 함수를 해보려고한다.

1
2
3
4
5
6
7
<script>
    for (var i = 0; i < 3; i++) {
        setTimeout(function(){
            alert(i);
        },0);
    }
<script>
cs

저렇게 실행하면 무슨 값이 나올까 생각해보자.

보통 0, 1, 2라고 생각할 것이다.

나만 그런가?

실제로 돌려보면 3, 3, 3으로 알림창이 뜬다.

왜그럴까

setTimeout() 함수를 호출하는 시점이 반복문이 모두 끝난 이후이므로 발생하는 문제

라고 설명 되어있다.

그래서 0, 1, 2 를 따로 출력하고 싶다면 변수를 따로 복사해둬야 한다.

1
2
3
4
5
6
7
8
9
<script>
    for (var i = 0; i < 3; i++) {
        (function (closed_i) {
            setTimeout(function() {
                alert(closed_i);
            },0);
        })(i);
    }
<script>
cs

클로저를 사용하면 0, 1, 2로 출력이 가능하다.

close변수라고 나오는데 이건 다음에 살펴보도록하자.

나도 이해를 못해서 ㅋㅋㅋ