쏘핫
961
2020-11-22 17:33:05 작성 2020-11-22 17:33:54 수정됨
4
160

자바스크립트 비동기적 프로그래밍 관련 질문있습니다.


    var i;

    for(i = 5i>=0i--){

        console.log("현재 i 값: " + i);

        setTimeout(function(){
            console.log("stTimeout 실행하는 i : " + i);
            console.log(i === 0 ? "go!!!"i);

        }, (5-i)*1000);
    }

이 코드에서 결과를 보면

이렇게 나오는데 책 설명을 보면
setTimeout에 전달된 함수가 루프 안에서 실행되지 않고 루프가 종료된 뒤에 실행된다고 나와
있는데요..
이 말 자체가 이해가 안가는데 설명좀 가능하신분 계실까요... ㅎㅎ
\



0
  • 답변 4

  • 발상
    5
    2020-11-22 17:43:14

    setTimeout안에 정의된 함수가 실행되는 시점에는 이미 반복문이 종료된 이후입니다..

    그때 사용 되는 i 라는 변수는 포문이 종료된 시점의 값인 -1을 가지게 되는 거구요

    해당 이슈를 피하시려면

    대충 이런식으로 하시면 될거에요

    var i;


        for(i = 5; i>=0; i--){

            console.log("현재 i 값: " + i);

    let temp = i;

            setTimeout(function(){


                console.log("stTimeout 실행하는 i : " + temp);

                console.log(temp === 0 ? "go!!!": temp);


            }, (5-i)*1000);

        }

  • John Suhr
    3k
    2020-11-22 17:44:33

    js는 콜 스택 말고도 이벤트 루프라는 작업 queue가 있어요. setTimeout을 호출하면 주어진 함수가 이 이벤트 루프에 쌓이는데 실행 순위가 콜 스택보다 후순위입니다. for 루프를 돌리는 함수가 끝나지 않으면 실행되지 않습니다 따라서 for가 끝난 후 이벤트 루프에 쌓인 작업들이 시작되는데 이 때 i의 값은 이미 -1이므로 모두 같은 값을 줍니다.

  • 제관공
    53
    2020-11-22 17:51:21

    자바스크립트 이벤트 루프에 대해서 찾아보시면 이해하시는데 도움이 될것 같네요.

    간단하게 설명하면 setTimeout같은 webAPI 또는 비동기 동작 들은 코드가 실행될 때 곧바로 콜 스택에 쌓이는게 아니라 message queue라고 하는 대기열에 콜백함수를 저장해뒀다가 콜 스택이 비어잇을 때 실행이 됩니다. 즉 setTimeout의 콜백함수들은 타임아웃이 끝났을 때 차례로 message queue에 저장되었다가 for루프가 모두 돌아 call stack이 비었을 때 하나씩 순서대로 콜스택으로 푸시되어 처리됩니다.

  • 쏘핫
    961
    2020-11-22 18:46:54

    답변 모두 감사합니다!!!

    설명을 들으니 이해가 잘 되네요 ㅎㅎ

  • 로그인을 하시면 답변 을 등록할 수 있습니다.