JavaScript 变量不起作用

Question

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

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

我已使用 chrome.storage API 存储了一个数字。我正在使用以下方法获取值:

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

console.log 显示正确的值 (2)。但是当我尝试使用这个变量时，我得到了未定义:

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

注意:此代码直接位于第一段代码下方。

我希望控制台记录数字 2 并将 div textToChange 的内容更改为 2，但是，我在控制台中得到 undefined 并且 div 保持不变。为什么是这样？

据我了解，我有一个全局变量，因为我在文档顶部声明了该变量，那么是什么使得 document.getElementById... 无法读取该变量？

另一件事是，即使我上面所说的 console.log 在文档中的顺序相同，它们在控制台中的显示顺序却相反(即，我得到 undefined 首先，然后 2。)我知道，因为我向 console.log 添加了一些文本 ('text' + maxLengthVar)' s。这是为什么？

Answer 1

您需要阅读异步方法。

基本上，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;
});