Javascript variable globale ne fonctionne pas correctement?

Question

Mon code jQuery:

$(document).ready(function() { 
    chrome.extension.sendRequest({get: "height"}, function(response) { 
     height = response.value; 
    }); 

    $("#id").css("height", height+"px"); 
}); 

Vous ne doit pas être préoccupé par la chrome.extension.sendRequest(), au fond, il communique avec une page d'arrière-plan pour aller chercher la valeur de « hauteur » de localStorage et stocke la valeur dans la variable globale height .

Le problème réside dans $("#id") ne pas être affecté la valeur de hauteur. Cependant si je devais le modifier tel qu'il est maintenant:

$(document).click(function() { 
    $("#id").css("height", height+"px"); 
}); 

cela fonctionne. Une idée pourquoi?

Answer 1

La raison en est que lorsque vous reporter l'affectation à un clic sur un document, cela signifie que la requête a le temps de terminer et de définir la valeur de hauteur.

Dans votre premier exemple, la hauteur n'a pas de valeur au moment de l'affectation. La raison en est que le corps de la fonction transmis à sendRequest n'est pas exécuté immédiatement, mais il est sauvegardé jusqu'à ce que la requête soit terminée. Après cela, la fonction est appelée. Mais avant cela, javascript continuera à exécuter votre instruction $("#id").... Pour vous assurer qu'il ne soit pas attribué une valeur jusqu'à ce qu'il y en a un, changer à ce qui suit:

$(document).ready(function() { 
    chrome.extension.sendRequest({get: "height"}, function(response) { 
     height = response.value; 
     $("#id").css("height", height+"px"); 
    }); 
}); 

Maintenant, si la fonction de rappel passé à sendRequest est exécutée dans un contexte où ce code ne peut pas être exécuté, comme pourrait bien être le cas avec les extensions du navigateur, vous pourriez avoir à passer une référence à l'objet à la place:

$(document).ready(function() { 
    var myObj = $("#id"); 
    chrome.extension.sendRequest({get: "height"}, function(response) { 
     height = response.value; 
     myObj.css("height", height+"px"); 
    }); 
}); 

Mais je partirais avec la première version si cela fonctionne.

Lorsque vous avez appliqué cela, déterminez si vous devez toujours conserver la variable height global ...