调用chrome.tpos.query后，结果不可用

Question

调用chrome.tpos.query后，结果不可用我正在为GoogleChrome创建(学习)一个扩展。为了调试一些代码，我插入了console.log()，如下：var fourmTabs = new Array();chrome.tabs.query({}, function (tabs) {     for (var i = 0; i < tabs.length; i++) {         fourmTabs[i] = tabs[i];     }});for (var i = 0; i < fourmTabs.length; i++) {     if (fourmTabs[i] != null)         window.console.log(fourmTabs[i].url);     else {         window.console.log("??" + i);     }}这是非常简单的代码：将所有选项卡信息放入我自己的数组中，并打印一些内容。为了检查代码是否正常工作，我运行代码。问题来了：当我使用断点(通过开发人员工具)时，代码运行良好。没有断点，任何东西都不会被打印出来。知道为什么吗？

Answer 1

您的问题可以简化为：

/*1.*/ var fourmTabs = [];

/*2.*/ chrome.tabs.query({}, function(tabs) {

/*3.*/     fourmTabs[0] = tabs[0];

/*4.*/ });

/*5.*/ console.log(fourmTabs[0]);

你以为fourmTabs数组在到达第5行时(按第3行)更新。
那是不对，因为chrome.tabs.query方法是异步.

---

为了让您理解异步方面的重要性，我展示了一个代码片段，其结构与您的代码具有相同的结构。和一个故事。

/*1.*/ var rope = null;

/*2.*/ requestRope(function(receivedRope) {

/*3.*/     rope = receivedRope;

/*4.*/ });

/*5.*/ grab(rope);

• 在第1行，绳子的存在被宣布。
• 在第2-4行，a

  回调函数

  创建，应该由

  requestRope

  功能。
• 在第5行，您将通过

  grab

  功能。

什么时候requestRope已实现同步没有问题：
你：“嗨，我要一根绳子，求你了。”扔绳子^{“调用回调函数”}当你有了一个。“
她：“当然。”抛绳
你：跳绳-你设法走到另一边活的.

什么时候requestRope已实现异步，如果将其视为同步，则可能会出现问题：
你：“请向我扔一根绳子。”
她：“当然，让我们看看.”
你：跳跃和试图抓住绳子因为没有绳子，你就会摔倒而死。
她：抛绳 _{当然太晚了。}

---

现在您已经看到了异步实现函数和同步实现函数之间的区别，让我们解决原来的问题：

var fourmTabs = new Array();chrome.tabs.query({}, function (tabs) {
    for (var i = 0; i < tabs.length; i++) {
        fourmTabs[i] = tabs[i];
    }
    // Moved code inside the callback handler
    for (var i = 0; i < fourmTabs.length; i++) {
        if (fourmTabs[i] != null)
           window.console.log(fourmTabs[i].url);
        else {
            window.console.log("??" + i);
        }
    }});// <moved code inside callback function of chrome.tabs.query>

对于断点，代码可以工作，因为到达代码的第二部分时，回调已经被调用。

Answer 2

简单地跳起来后收到绳子。“跳转逻辑”必须附加到回调函数中。我已经在答案的末尾为你的案例添加了代码，我希望你现在理解它：)