循环怪异行为的Javascript

Question

I find it weird that I get this output:

Wait..
Request 2 Complete.
Request 2 Complete.

On a simple for loop:

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.');
            }
        }
    });

}

How come i is always equal to 2 ?

Answer 1

This is, because both calls to i inside your ajax request reference the same i of the for -loop. At the point in time, when the requests are completed (and thus i is accessed) the loop has terminated and i has the final value, here 2 .

I think you look for something like this:

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 );
}

By passing the value of i to the immediately executed function, you create a copy of the respective value of i to use inside the ajax-requests.

Answer 2

try using

     async = false;
in ajax request