jQuery global variable problem

问题

var id = $(this).children().html();  // id is 5
$.ajax({
   url: 'ajax.php?id=' + id,
   success: function(data) {
      id = data;   // id is 1
   }
});
if(id == 1){    // id is again 5
   ...
}

Why in the following example I can't reinitialize the id variable? What is wrong?

Thanks.

回答1:

The $.ajax() function has to go and get the data, it hasn't done this and executed your success callback by the time it reached the code immediately after.

Your code order actually happens like this:

var id = $(this).children().html();
//Ajax start
if(id == 1){ }
//Ajax end (sometime later, not immediately after)
function(data) { id = data; }

If you are depending on this value to continue, stick it in the success callback:

var id = $(this).children().html();  // id is 5
$.ajax({
   url: 'ajax.php?id=' + id,
   success: function(data) {
      id = data;   // id is 1
      if(id == 1){    // id is now 1
        ...
      }
   }
});

回答2:

Refactoring the code like this would work:

function by_id() {
 if(id == 1) {   
   ... do something ...
 }
}

var id = $(this).children().html();
$.ajax({
   url: 'ajax.php?id=' + id,
   success: function(data) {
      id = data;
      by_id();  // call on successful ajax load
   }
});

The advantage of wrapping your id logic in a function allows you to call it anywhere - be it at the end of an AJAX request, at page load, on a button press, etc.

回答3:

your if statement executes before your .ajax call completes

回答4:

The A in Ajax is for Asynchronous. From within the 'success' callback you can call another function or execute post-ajax code.

回答5:

Hey a better solution is using the async: false property, something like this:

var id = $(this).children().html();  // id is 5
$.ajax({
   url: 'ajax.php?id=' + id,
   async: false,
   success: function(data) {
      id = data;   // id is 1
   }
});
if(id == 1){    // id is again 5
   ...
}

;)