javascript - Google Chrome 扩展程序中的变量值不一致

Question

我正在为 Chrome 编写一个扩展，它基本上可以处理书签。 以下代码位于弹出的 html 文件中，并且在正文 onload 事件中调用 bookmarkHelper() 函数。它应该检查名为“TestFolder”的书签文件夹是否存在。如果存在，它将删除该文件夹中的所有书签。如果没有，它会创建空文件夹。

var rootFolder = undefined;
function bookmarkHelper() {
    // Create TestFolder folder if it doesn't exist
    chrome.bookmarks.getTree(function(tree) {
        otherFolder = tree[0].children[1].children;
        rootFolder = undefined;
        for(i=0; i<otherFolder.length; i++) {
            if(otherFolder[i].title == "TestFolder") {
                rootFolder = otherFolder[i];
                return;
            }
        }
        chrome.bookmarks.create({'parentId': "2",
                         'title': 'TestFolder'},
                        function(newFolder) {} );
    });

    // Remove all bookmarks from the rootFolder
    for (i=0; i<rootFolder.children.length; i++)
        chrome.bookmarks.remove(rootFolder.children[i].id);
}

现在我的问题是，当文件夹中有书签时，它不会删除它们。但如果我将最后 3 行更改为

setTimeout(function(){
    for (i=0; i<rootFolder.children.length; i++)
        chrome.bookmarks.remove(rootFolder.children[i].id);
}, 100);

它会删除书签。 在另一种情况下，当我检查弹出窗口时，它使用原始代码删除书签。这很奇怪，我不知道该怎么办。 我在这里错过了一些匿名函数线程类型的概念吗？因为据我所知，JS 是单线程的。

Answer 1

Chrome API 调用是异步的，因此如果您想按顺序运行它们，则需要将代码放入回调中。此外，假设您想在继续之前等待创建书签文件夹，您的整个 bookmarkHelper 也应该以异步方式重写。

function bookmarkHelper(callback) {
    // Create TestFolder folder if it doesn't exist
    chrome.bookmarks.getTree(function(tree) {
        otherFolder = tree[0].children[1].children;
        rootFolder = undefined;
        for(i=0; i<otherFolder.length; i++) {
            if(otherFolder[i].title == "TestFolder") {
                rootFolder = otherFolder[i];

                //"return" here wouldn't return from bookmarkHelper as you probably expect
                break;
            }
        }

        //it would be easier to always just recreate TestFolder 
        if(rootFolder == undefined) {
            chrome.bookmarks.create({'parentId': "2", 'title': 'TestFolder'}, callback);
        } else {
            // Remove whole rootFolder subtree
            chrome.bookmarks.removeTree(rootFolder, function() {
                chrome.bookmarks.create({'parentId': "2", 'title': 'TestFolder'}, callback);            
            });
        }
    });


}

//usage
bookmarkHelper(function(testFolder) {
    //do something with testFolder
});

我重新制作了它，始终删除整个树并重新创建它，因为否则您需要监视整个 chrome.bookmarks.remove 回调何时完成并行执行才能继续，这很令人讨厌。