Fonctions et fonctions de rappel des extensions Chrome

Question

J'apprends à coder les extensions Chrome et je suis curieux de transmettre des paramètres dans des fonctions asynchrones et un problème de simultanéité. Permettez-moi de vous donner un exemple:

function updateActiveTab(param1) 
{ 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) 
    { 
     onUpdatingTab(tabs[0].id, param1); 
    }); 
} 

function onUpdatingTab(tabID, param1) 
{ 
    console.log("Tag ID=" + tabID + ", param=" + param1); 
} 

Alors, laisse supposer que la première fois que ma méthode updateActiveTab() est appelée avec param1=1 et l'appel à chrome.tabs.query() prend un certain temps. Pendant ce temps, tandis que chrome.tabs.query() est toujours en cours de traitement, ma méthode updateActiveTab() est appelée à nouveau avec param1=2. Que se passerait-il lorsque le premier appel à chrome.tabs.query() renverrait et commencerait à traiter sa fonction de rappel? Est-ce que param1 sera 1 ou 2?

Je cherche évidemment à passer mon param1 comme 1, et 2, et ainsi de suite, aux appels respectifs de sa fonction.

Answer 1

La réponse courte est que vous allez gagner. Lire sur les fermetures de JavaScript pour vraiment comprendre ce qui se passe ici. Je vais frapper les faits saillants afin que vous obteniez l'idée.

La référence à param1 à l'intérieur de onUpdatingTab force param1 dans une fermeture. La fermeture maintient la valeur de param1 active tant qu'elle est nécessaire aux appels aux fonctions internes. Le scénario que vous décrivez créera deux fermetures différentes, une pour chaque appel à onUpdatingTab.

Voici un exemple adapté de JavaScript: The Good Parts qui illustre cet aspect des fermetures. Cette fonction prend un ensemble de noeuds DOM et ajoute un gestionnaire onclick qui affiche le ordinale du noeud:

function add_the_handlers = function (nodes) { 
    var helper = function(i) { 
     return function(e) { alert(i); }; 
    }; 
    var i; 
    for (i = 0; i < nodes.length; i += 1) { 
     nodes[i].onclick = helper(i); 
    } 
} 

Chaque appel auxiliaire retourne une fonction où la référence à « i » est lié à la fermeture pour que helper appel. Notez la distinction sémantique avec le code qui n'utilise pas l'aide, mais fait exactement ceci:

 nodes[i].onclick = function() { alert(i); } 

Ici « i » à nouveau se lie à une fermeture, mais il est la fermeture associée à l'appel à add_the_handlers, donc en cliquant sur chaque nœud affiche la même valeur, qui est le nombre de nœuds et non l'ordinal. C'est la dernière valeur attribuée à "i".