Question

94

scope of variables in JavaScript callback functions

rated 0 times [ 99] [ 5] / answers: 1 / hits: 24806 / 14 Years ago, mon, may 17, 2010, 12:00:00

I expected the code below to alert 0 and 1, but it alert 2 twice. I don't understand the reason. Don't know if it is a problem of jQuery. Also, please help me to edit title and tags of this post if they are inaccurate.

<html>

    <head>

        <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>

        <script type=text/javascript>

            $(function() {

                for (var i=0; i<2; i++) {

                    $.get('http://www.google.com/', function() {

                        alert(i);

                    });

                }

            });

        </script>

    </head>

    <body>

    </body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brandensebastiand

Add To Favorites

Follow

Total Points: 323

Total Questions: 115

Total Answers: 106

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

answered 14 Years ago austonjuancarlosb · Accepted Answer

You're sharing the single i variable among all of the callbacks.

Because Javascript closures capture variables by reference, the callbacks will always use the current value of i. Therefore, when jQuery calls the callbacks after the loop executes, i will always be 2.

You need to reference i as the parameter to a separate function.

For example:

function sendRequest(i) {

    $.get('http://www.google.com/', function() {

        alert(i);

    });

}



for (var i = 0; i < 2; i++) {

    sendRequest(i);

}

This way, each callback will have a separate closure with a separate i parameter.