javascript - Chrome 书签中的递归与回调函数

Question

我正在尝试使用 chrome 书签 API 编写一个函数来创建一组分层的书签。我可以使用递归函数很好地遍历树。

但是在创建书签时，由于 API 的异步特性，这将不起作用。 chrome.bookmarks.create(object bookmark, function callback()) 第一个参数为书签节点数据，第二个参数为回调函数；您可以在该回调中获取新节点的 id ( api reference )。

我的层次结构有这个数据结构:

var newbookmarks = [
    { title: 'bookmark1',
      url: 'foo.com'
      submenu: []
    },
    { title: 'Submenu1',
      submenu: [
        { title: 'bookmark1.1',
          url: 'bar.org',
          submenu: []
        },
        { title: 'bookmark1.2',
          url: 'baz.com',
          submenu: []
        }
      ]
    },
    { title: 'bookmark2',
      url: 'bletch.edu',
      submenu: []
    }
];

它是一个节点对象数组，每个节点对象都有一个子菜单元素，该子菜单元素本身可以是一个节点对象数组。

我的第一个想法是像遍历函数一样递归地创建层次结构:

createBookmarkNodes(parentid, bookmarks) {
  var i,newnode;
  for (i=0; i<bookmarks.length; i++) {
    newnode = chrome.bookmarks.create({parentId: parentid, title: bookmarks[i].title, url: bookmarks[i].url});
    if (bookmarks[i].submenu.length > 0) {
      createBookmarkNodes(newnode.id, bookmarks[i].submenu);
    }
  }
}

这不起作用，因为 create 不会返回我需要的子菜单父 id 的节点，在到达回调之前你无法找到它。但是一旦进入回调，我就不知道自己在 newbookmarks 数据结构中的位置了。

function installBookmarkNodes(parentid, bookmarks) {
    var i;
    for (i=0; i<bookmarks.length, i++) {
        chrome.bookmarks.create({parentId: parentid, title: bookmarks[i].title, url: bookmarks[i].url}, create_callback);
    }
}
function create_callback(bookmarkobj) {
    var child-nodes-of-this-bookmark = ???;
    for (child-nodes-of-this-bookmark) {
        chrome.bookmarks.create({parentId: bookmarkobj.parentId, title: ???, url: ???}, create_callback);
    }
}

如何在回调范例中保留我在新书签数据结构中的位置？

Answer 1

只需将递归调用移至回调中即可:

createBookmarkNodes(parentid, bookmarks) {
    bookmarks.forEach(function(bm) {
        chrome.bookmarks.create({
            parentId: parentid,
            title: bm.title,
            url: bm.url
        }, function(result) {
            if (bm.submenu && bm.submenu.length > 0) {
                createBookmarkNodes(result.id, bm.submenu);
            }
        });
    });
}