我的 JavaScript 代码不是线性运行的

Question

我对JavaScript相当陌生，我一直在尝试创建一个Chrome扩展程序。Chrome扩展程序基本上搜索特定的书签"集"并将它们添加到数组中。我认为用代码更容易解释：

var books = [];
function getBookmarks(){
    console.log("Bookmarks!");
    chrome.bookmarks.getTree(function(bookmarks){
        search_for_title(bookmarks, "Music", null, books); //Collect all bookmarks in the "Music" folder and put them into the books array
    });
    for(var i = 0; i < books.length; i++){ //Once all bookmarks are added to the books array, loop through all of them
        console.log("ITEM: " + books[i]);
    }
    console.log("books: " + books.length); //Print out the length of the books array
}
function search_for_title(bookmarks, title, parent){
    if(parent == null){ //First find the parent folder
        for(var i = 0; i < bookmarks.length; i++){ //Loop through all bookmarks
            if(bookmarks[i].title == title){ //If the bookmark title matches the title of the folder we're looking for ("Music"), proceed                    
                search_for_title(bookmarks[i].children, null, bookmarks[i].id); //Loop through all the bookmarks in the folder that we found
                console.log("books length: " + books.length);
            } else{
                if(bookmarks[i].children){ //If the bookmark is a folder, it has children                        
                    search_for_title(bookmarks[i].children, title, parent);
                }
            }
        }
    } else if(title == null){ //Parent folder is found, now just traverse the bookmarks within
        for(var i = 0; i < bookmarks.length; i++){
            console.log("books[" + i + "] = " + bookmarks[i].title + " , books length: " + books.length);
            books[i] = bookmarks[i].title; //Assign all the bookmarks into the books array
        }
    }
}
getBookmarks();
console.log("FINAL BOOKS: " + books.length);

需要注意的几件事：var books = [] 在全局范围内声明和初始化，函数search_for_title递归，并且在此代码片段的末尾调用 getBookmarks（） 以启动代码。

现在，我通常来自Java和C++背景，那里的所有内容都是线性的，并且没有这些"回调"函数是我不熟悉的。所以，我认为输出应该是：

1. 书签！

-

2. 打印出"音乐"文件夹中的所有书签，然后返回getBookmarks功能-

3. 项目：。。。

4. 项目：。。。

5. 项目：。。。

6. 。

书籍

7. ：625 **（书籍的长度）**

8. 最终书籍： 625

但是，我得到的输出是：

1. 书签！这很好

2. 书籍： 0 为什么在开头是这样？此值应为 625

3. 最终书籍： 0 为什么程序中的最后一行代码几乎在开头？此值应为 625

-

4. 找到的所有书签 - 这很好

5. 书籍长度：0 这应该靠近程序的开头，如第二行正确的值为 0

我显然是在 search_for_title 方法中直接访问全局"books"数组，但由于某种原因，它总是告诉我数组的长度为 0。此外，由于某种原因，我的代码似乎没有任何线性路径，它只是到处跳跃。此外，当程序打印出每个单独的书签时，它会打印出书籍数组的正确长度（即书籍[599] = Nero - Promise - YouTube，书籍长度：600），但是为什么当它返回getBookmarks函数时，它总是说长度为0？

Answer 1

JavaScript 是线性运行的，但是chrome.bookmarks.getTree方法是异步调用。这意味着 #getTree 方法之后的代码不会等到方法完成。

在JavaScript中，函数是第一类对象。回调函数被传递到 #getTree 方法中，该方法在执行自己的逻辑后执行参数函数。

在当前代码中，每次的日志结果都会略有不同，因为每个异步调用需要不同的时间才能完成。您应该能够通过简单地在回调函数中移动循环和日志代码来完成这项工作。

function getBookmarks(){
  console.log("Bookmarks!");
  chrome.bookmarks.getTree(function(bookmarks){
    search_for_title(bookmarks, "Music", null, books); //Collect all bookmarks in the "Music" folder and put them into the books array
    for(var i = 0; i < books.length; i++){ //Once all bookmarks are added to the books array, loop through all of them
      console.log("ITEM: " + books[i]);
    }
    console.log("books: " + books.length); //Print out the length of the books array
  });
}