javascript - 谷歌浏览器 JavaScript 数组错误？

Question

我正在开发 Google Chrome 扩展程序。在弹出窗口中我有以下代码:

var bookmarks = [];
function appendBMTnode(node){
    bookmarks.push([node[0].title, node[0].id]);
}
function addchildren(results){
    for(x = 0; x < results.length; x++){
        bookmarks.push([results[x].title, results[x].id]);
        chrome.bookmarks.getChildren(results[x].id, addchildren);
    }
}
function getallbookmarks(){
    chrome.bookmarks.get('0', appendBMTnode);
    chrome.bookmarks.getChildren('0', addchildren);
}
getallbookmarks();
console.debug(bookmarks.length);
console.debug(bookmarks);

现在，我假设第一个命令将发出我拥有的书签数量。事实上，当我使用 Chrome 的调试器并将 bookmarks.length 添加到监视列表时，值是 418。在调试器的控制台中，我可以编写 bookmarks.length ，它会给我正确的长度。我可以打字

for(x = 0; x < bookmarks.length; x++){ console.debug(bookmarks[x]); }

我得到每个内部数组的字符串表示形式。但是，原始的 console.debug(bookmarks.length) 给出的输出为零。如果我将 console.debug(bookmarks[0]); 添加到 popup.html，它会告诉我该值未定义。

但是如果我将以下内容添加到 getallbookmarks() (第一个或最后一个):

for(x = 0; x < 10; x++){
    bookmarks.push(x);
}

然后 bookmarks.length 首先是 10，然后是 428。另外，当我添加以下函数时:

function printlen(){
    console.debug(bookmarks.length);
}

然后在正文中添加

<a href="#" onclick="printlen()">test</a>

然后我还将获得正确的 bookmarks.length 值。

知道为什么书签对象无法注册吗？

Answer 1

chrome.bookmarks.get 是一个异步函数。当您调用它时，它会立即返回，并在后台加载书签数据。

所以如果你在调用getallbookmarks()之后立即查看bookmarks.length，它自然是不完整的。当您稍后单击 printlen() 按钮时，书签加载将完成，并且数组将被填充。

在调用 appendBMTnode() 和 addchildren() 之前，您无法知道您的 bookmarks 数组是否完整并可供使用。这就是 chrome.bookmark 方法采用回调函数而不仅仅是返回值的原因。

[编辑]:

how do I "wait" until it's finished loading everything?

你真的不能，JavaScript 并没有为你提供语言级工具(如线程或协同例程)来同步运行异步代码，反之亦然。您必须习惯编写基于回调函数的异步代码。

在这种情况下，您可以有一个计数器，每次调用 get() 或 getChildren() 时该计数器都会增加，并在每个 结束时递减appendBMTnode 和 addchildren 回调。如果计数器此时达到零，则没有异步调用等待，因此您可以调用自己的“完成”回调函数。回调函数通常被编写为内联函数表达式，以使流程更加清晰。

目前代码的一个问题是书签数组没有固有的顺序，因为所有内容都是并行调用的。它不能保证 get() 会在 getChildren() 之前返回结果，并且每次 addchildren 调用 getChildren() 同样，不同 parent 的结果可以按任何顺序出现。

考虑使用getTree()方法代替。这将一次性为您提供整个书签列表，这可能会更容易处理:

var bookmarks= [];
chrome.bookmarks.getTree(function(marks) {
    for (var i= 0; i<marks.length; i++)
        bookmarks.push([marks[i].title, marks[i].id]);
    // bookmarks is now populated. do code that relies on bookmarks here
});
// at this point bookmarks will still be empty, the callback function hasn't
// happened yet