javascript - how - Después de llamar a chrome.tabs.query, los resultados no están disponibles

editar javascript chrome

Question

Estoy creando (aprendiendo) una extensión para Google Chrome.

Para depurar algún código, console.log() , de la siguiente manera:

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);
    }
}

Es un código muy simple: obtenga toda la información de pestañas en una matriz propia e imprima algunas cosas.

Para verificar si el código funciona como debería, ejecuto el código. Aquí viene el problema:

• Cuando uso puntos de interrupción (a través de las herramientas de desarrollo), el código funciona bien.
• Sin puntos de interrupción, no se imprime nada.

¿Alguna idea de por qué?

Answer 1

Su problema se puede simplificar a:

/*1.*/ var fourmTabs = [];
/*2.*/ chrome.tabs.query({}, function(tabs) {
/*3.*/     fourmTabs[0] = tabs[0];
/*4.*/ });
/*5.*/ console.log(fourmTabs[0]);

fourmTabs que la matriz fourmTabs se actualice (por la línea 3) cuando se alcance la línea 5.
Eso está mal , porque el método chrome.tabs.query es asíncrono .

En un intento por hacerle comprender el significado del aspecto asincrónico, muestro un fragmento de código con la misma estructura que su código y una historia.

/*1.*/ var rope = null;
/*2.*/ requestRope(function(receivedRope) {
/*3.*/     rope = receivedRope;
/*4.*/ });
/*5.*/ grab(rope);

• En la línea 1, se anuncia la presencia de una cuerda.
• En las líneas 2 a 4, se crea una función de devolución de llamada , que debe ser llamada por la función requestRope .
• En la línea 5, agarrarás la cuerda mediante la función de grab .

Cuando requestRope se implementa de forma sincronizada , no hay problema:
Tú: "Hola, quiero una cuerda. Por favor, tira la cuerda ^{", llama a la función de devolución de llamada "} cuando tengas una".
Ella: "Claro". tira la cuerda
Tú: Salta y agarra la cuerda : logras llegar al otro lado, vivo .

Cuando requestRope se implementa de forma asincrónica , puede tener un problema si lo trata como sincrónico:
Usted: "Por favor, arrojame una cuerda".
Ella: "Claro. Echemos un vistazo ..."
Tú: saltas e intenta agarrar la cuerda. Porque no hay cuerda, te caes y mueres.
Ella: lanza una cuerda _{Demasiado tarde, por supuesto.}

Ahora que ha visto la diferencia entre una función implementada de forma asincrónica y sincrónica, resuelvamos su pregunta original:

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>

Con los puntos de interrupción, su código funciona, porque cuando se llega a la segunda parte del código, ya se ha llamado a la devolución de llamada.