Javascript 全局变量无法正常工作？

Question

我的 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");
});

它有效。知道为什么吗？

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 变量保持全局...