Question

我的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中。 / p>

问题在于$("#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变量保持为全局...

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

1 个答案: