Problème de variable globale jQuery

Question

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 
    ... 
} 

Pourquoi dans l'exemple suivant je ne peux pas réinitialiser la variable d'ID? Qu'est-ce qui ne va pas?

Merci.

Answer 1

$.ajax() La fonction $.ajax() doit aller chercher les données, cela n'a pas été fait et a exécuté votre rappel de succès au moment où il a atteint le code immédiatement après.

Votre code de commande se fait comme ceci:

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

Si vous dépendez de cette valeur pour continuer, le coller dans le rappel de succès:

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

Answer 2

La fonction AJAX est asynchrone. Il fonctionnera en arrière-plan et quand il aura fini d'obtenir la page ajax.php, il exécutera la fonction de succès.

Answer 3

votre instruction if exécute avant votre .ajax appel complète

Answer 4

Le A à Ajax est pour Asynchronous. À partir du rappel de «réussite», vous pouvez appeler une autre fonction ou exécuter un code post-ajax.

Answer 5

refactoring du code comme ceci fonctionnerait:

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

L'avantage d'envelopper votre logique id dans une fonction vous permet d'appeler partout - que ce soit à la fin d'une requête AJAX, au chargement de la page, sur une presse de bouton, etc.

Answer 6

Hey une meilleure solution est d'utiliser le async: false propriété, quelque chose comme ceci:

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 
    ... 
} 

;)