Question

我正在尝试制作一个简单的Chrome扩展程序。

在文档的顶部，我放了var maxLengthVar;。

我使用chrome.storage API存储了一个数字。我使用以下get值：

chrome.storage.sync.get('maxLength', function (items) {
    maxLengthVar = items.maxLength;
    console.log(maxLengthVar);
});

console.log显示正确的值（2）。但是当我尝试使用这个变量时，我得到undefined：

console.log(maxLengthVar);
document.getElementById("textToChange").innerHTML = maxLengthVar;

注意：此代码正好位于第一段代码

之后。

我希望控制台将数字2和div textToChange的内容更改为2，但相反，我会将undefined更改为document.getElementById控制台和div保持不变。为什么是这样？

根据我的理解，我有一个全局变量，因为在文档的顶部，我声明了变量，那么是什么使得console.log ...没有读取变量？

另一件事是，即使我上面说的undefined在文档中的顺序相同，它们也会在控制台中反转出来（即先得到2然后'text' + maxLengthVar 1}}。）我知道，因为我在console.log中添加了一些文字（{{1}}）。这是为什么？

Answer 1

您需要阅读async方法。

基本上get方法是异步方法。在执行此方法时，脚本的其余部分将执行打印undefined

chrome.storage.sync.get('maxLength', function (items) {
    maxLengthVar = items.maxLength;
    console.log(maxLengthVar);
});

// <- at this point the async GET method may not have finished executing
//    but your code continues anyway

console.log(maxLengthVar);
document.getElementById("textToChange").innerHTML = maxLengthVar;

您的代码可以使用回调重写

chrome.storage.sync.get('maxLength', function (items) {
    maxLengthVar = items.maxLength;
    document.getElementById("textToChange").innerHTML = maxLengthVar;
});

JavaScript变量不起作用

1 个答案: