Javascript for循环奇怪的行为

Question

我发现这个输出很奇怪:

Wait..
Request 2 Complete.
Request 2 Complete.

在一个简单的for循环:

for (var i = 0, j = urls.length; i < j; i += 1) {
    $.ajax({
        url: urls[i],
        dataType: 'jsonp',
        complete: function() {
            log.append('Request ' + i + ' Complete.' + "\n");
            if (i == (j - 1)) {
                log.append('Done.');
            }
        }
    });

}

怎么i总是等于2？

Answer 1

这是因为对iajax请求内部的两个调用都引用i了for-loop 的相同内容.在这个时间点,当请求完成(并因此i被访问)时,循环终止并i具有最终值,这里2.

我想你会找到这样的东西:

for (var i = 0, j = urls.length; i < j; i += 1) {
  !function( i ){
    $.ajax({
        url: urls[i],
        dataType: 'jsonp',
        complete: function() {
            log.append('Request ' + i + ' Complete.' + "\n");
            if (i == (j - 1)) {
                log.append('Done.');
            }
        }
    });
  }( i );
}

通过将值传递i给立即执行的函数,您可以i在ajax-requests中创建要使用的相应值的副本.