javascript - 在这里变得不确定。有什么理由吗？

问题描述

所以我目前正在制作一个 chrome 扩展，允许您设置网站的快捷方式并直接访问它们。但由于某种原因，我目前在这里，在command1

这是代码：

let current_url = document.getElementsByClassName("current_url");
let bg = chrome.extension.getBackgroundPage();
let url = ""
let storage = chrome.storage.sync
console.log(chrome)
console.log(bg)
console.log(bg.command1)
function adder(){
    for(elt of current_url) {
       switch(elt.innerHTML) {
           case "command1":
               chrome.storage.sync.get("key1", function(msg){url = msg.key1.toString(); console.log(msg.key1)});
               break;
           case "command2":
                 url = bg.command2;
                break;
           case "command3":
                url = bg.command3;
               break;
            case "command4":
                url = bg.command4;
                break;
       }
       elt.innerHTML = `${elt.innerHTML}       ${url}`;
       console.log(elt)
    }
}
adder()

.change-c{
    margin: 20px;
    background-color: grey;
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src= "app.js"></script>
</head>
<body>
    <ul class= "change-c">
        <p class= "current_url">command1</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class="change-c">
        <p class= "current_url">command2</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class="change-c">
        <p class= "current_url">command3</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class= "change-c">
        <p class= "current_url">command4</p><li><input type="text" class="enter"></li>
    </ul>
    
</body>
</html>

那么有什么想法为什么会发生这种情况？就像console.log("msg.key1")它确实说“https://www.youtube.com”但变量“url”是未定义的，即使它们是相同的。如果可以的话请帮忙

标签： javascripthtmlgoogle-chrome-extension

chrome.storage.sync.get是一个异步操作，当检索到值时，它将调用第二个参数中的函数。

在您的代码中，您正在调用此异步函数后立即读取变量的值，因此在调用回调函数之前，变量的值仍未设置。

要解决此问题，要么

在回调函数中设置 innerHTML 或

或者

promisify 函数，转换adder为 async 函数并使用 await 作为 promise

javascript - 在这里变得不确定。有什么理由吗？

问题描述

解决方案

推荐阅读