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>
You’re sharing the single
ivariable 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,iwill always be2.You need to reference
ias the parameter to a separate function.For example:
This way, each callback will have a separate closure with a separate
iparameter.