Comment structurer le callback javascript pour que la portée de la fonction soit correctement entretenue

Question

J'utilise XMLHttpRequest, et je veux accéder à une variable locale dans la fonction callback de succès.

Voici le code:

function getFileContents(filePath, callbackFn) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      callbackFn(xhr.responseText); 
     } 
    } 
    xhr.open("GET", chrome.extension.getURL(filePath), true); 
    xhr.send(); 
} 

Et je veux l'appeler comme ceci:

var test = "lol"; 

getFileContents("hello.js", function(data) { 
    alert(test); 
}); 

Ici, test serait hors de la portée de la fonction de rappel, car seule la englobante Les variables de la fonction sont accessibles dans la fonction de rappel. Quel est le meilleur moyen de passer test à la fonction de rappel afin que le alert(test); affiche correctement test?

Edit:

Maintenant, si j'ai le code suivant appelle la fonction définie ci-dessus:

for (var test in testers) { 
    getFileContents("hello.js", function(data) { 
     alert(test); 
    }); 
} 

Le code alert(test); imprime uniquement la dernière valeur de test de la boucle for. Comment faire pour qu'il imprime la valeur de test pendant l'appel de la fonction getFileContents? (Je voudrais le faire sans changer getFileContents parce qu'il est une fonction d'aide très générale et je ne veux pas faire spécifique en passant une variable spécifique comme test à elle.

Answer 1

Avec le code que vous avez fourni test sera toujours visible dans le rappel. xhr ne sera pas, autre que xhr.responseText être passé en tant que data.

Mise à jour de commentaire:

En supposant que votre code ressemble à quelque chose comme ceci:

for (var test in testers) 
    getFileContents("hello"+test+".js", function(data) { 
    alert(test); 
    }); 
} 

Comme ce script est exécuté, test sera attribué les valeurs des clés dans testers-getFileContents est appelée chaque heure, qui lance une requête en arrière-plan. Lorsque la requête se termine, elle appelle le rappel. test va contenir la VALEUR FINALE à partir de la boucle, car cette boucle a déjà fini d'être exécutée.

Il existe une technique que vous pouvez utiliser appelée une fermeture qui va résoudre ce genre de problème. Vous pouvez créer une fonction qui retourne votre fonction de rappel, la création d'un nouveau champ d'application, vous pouvez conserver vos variables avec:

for (var test in testers) { 
    getFileContents("hello"+test+".js", 
    (function(test) { // lets create a function who has a single argument "test" 
     // inside this function test will refer to the functions argument 
     return function(data) { 
     // test still refers to the closure functions argument 
     alert(test); 
     }; 
    })(test) // immediately call the closure with the current value of test 
); 
} 

Ce sera essentiellement créer un nouveau champ d'application (ainsi que notre nouvelle fonction) qui « tenir » à la valeur de test.

Une autre façon d'écrire le même genre de chose:

for (var test in testers) { 
    (function(test) { // lets create a function who has a single argument "test" 
    // inside this function test will refer to the functions argument 
    // not the var test from the loop above 
    getFileContents("hello"+test+".js", function(data) { 
     // test still refers to the closure functions argument 
     alert(test); 
    }); 
    })(test); // immediately call the closure with the value of `test` from `testers` 
} 

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.