Javascript全局变量不能正常工作？

我的jQuery代码：

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

您不必担心chrome.extension.sendRequest() ，基本上它与后台页面通信以从localStorage获取“height”的值并将值存储在全局变量height 。

问题在于$("#id")未被赋予高度值。 但是，如果我要修改它，现在它是：

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

有用。 知道为什么吗？

Answer 1

原因是当您将分配推迟到文档单击时，这意味着请求有时间完成，并设置高度值。

在第一个示例中，高度在分配时没有值。 原因是传递给sendRequest的函数体不会立即执行，但会在请求完成之前保存。 之后，调用该函数。 但在此之前，javascript将继续执行你的$("#id")...声明。 要确保在有值之前没有为其分配值，请将其更改为以下值：

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

现在，如果传递给sendRequest的回调函数是在无法执行该代码的上下文中执行的，那么浏览器扩展可能就是这种情况，您可能需要传递对该对象的引用：

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

但如果有效，我会选择第一个版本。

当您应用此项时，请调查是否仍需要保持height变量全局…