我的 jQuery 代码:
$(document).ready(function() {
chrome.extension.sendRequest({get: "height"}, function(response) {
height = response.value;
});
$("#id").css("height", height+"px");
});
您不必担心chrome.extension.sendRequest()
,基本上它与后台页面通信以从 localStorage 获取“高度”值并将该值存储在全局变量高度
。
问题在于 $("#id")
没有分配高度值。但是,如果我将其修改为现在的样子:
$(document).click(function() {
$("#id").css("height", height+"px");
});
它有效。知道为什么吗?
最佳答案
原因是,当您将分配推迟到文档点击时,这意味着请求有时间完成,并设置高度值。
在第一个示例中,高度在分配时没有值。原因是传递给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
变量保持全局...
关于Javascript 全局变量无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2591814/