主叫chrome.tabs.query后,结果是不可用 [英] After calling chrome.tabs.query, the results are not available
问题描述
我创建(学习)谷歌浏览器的扩展。
I'm creating (learning) an extension for Google Chrome.
要调试某些code,我插入的console.log()
,如下:
To debug some code, I inserted console.log()
, as follows:
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);
}
}
这很简单,code:让所有的选项卡信息到我自己的数组,并打印一些事情。
It's very simple code: get all tabs info into an array of my own, and print some things.
要检查code是否正常工作,因为它应该,我运行code。在这里,问题来了:
To check whether the code works as it should, I run the code. Here comes the problem:
- 当我使用断点(通过开发者工具)时,code运行正常。
- 无断点,没有打印。
任何想法,为什么?
推荐答案
您的问题可以简化为:
/*1.*/ var fourmTabs = [];
/*2.*/ chrome.tabs.query({}, function(tabs) {
/*3.*/ fourmTabs[0] = tabs[0];
/*4.*/ });
/*5.*/ console.log(fourmTabs[0]);
您想到的是, fourmTabs
数组(由3号线)到达5号线时更新。结果
这就是错误,因为 chrome.tabs.query
方法的同步
You expect that the fourmTabs
array is updated (by line 3) when line 5 is reached.
That is wrong, because the chrome.tabs.query
method is asynchronous.
在试图让你明白异步方面的意义,我将展示具有相同的结构,你的code一个code段和的故事。
In an attempt to make you understand the significance of the asynchronous aspect, I show a code snippet with the same structure as your code and a story.
/*1.*/ var rope = null;
/*2.*/ requestRope(function(receivedRope) {
/*3.*/ rope = receivedRope;
/*4.*/ });
/*5.*/ grab(rope);
- 在1号线,绳子的presence公布。
- 在2-4行,一个的回调函数的被创建,它应该由
requestRope
函数被调用。 - 在第5行,你要抓住通过绳索
抢
功能。 - At line 1, the presence of a rope is announced.
- At lines 2-4, a callback function is created, which ought to be called by the
requestRope
function. - At line 5, you're going to grab the rope via the
grab
function.
在 requestRope
实施同步后,没有任何问题:结果
&EMSP;你:你好,我想绳子请的抛绳的调用回调函数结果当你得到了一个。
&EMSP;她:当然。的抛出绳索的结果
&EMSP;您:跳转,并抓住绳的 - 您设法得到在另一边,存活的
When requestRope
is implemented synchronously, there's no problem:
You: "Hi, I want a rope. Please throw the rope"call the callback function" when you've got one."
She: "Sure." throws rope
You: Jumps and grabs rope - You manage to get at the other side, alive.
在 requestRope
实施异步,如果你把它当作你同步可能有问题:结果
&EMSP;你:请向我扔一根绳子。结果
&EMSP;她:好,让我们来看看......结果
&EMSP;您:跳转,并试图抓住绳子的因为没有绳子,你倒下和死亡结果
&EMSP;她:抛出绳索的<子>太晚了,当然
When requestRope
is implemented asynchronously, you may have a problem if you treat it as synchronous:
You: "Please throw a rope at me."
She: "Sure. Let's have a look..."
You: Jumps and attempts to grab rope Because there's no rope, you fall and die.
She: Throws rope Too late, of course.
现在你已经看到了一个异步和同步实现功能之间的区别,让我们来解决您原来的问题:
Now you've seen the difference between an asynchronously and synchronously implemented function, let's solve your original question:
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>
使用断点,您的code ++工程,因为到达到code的第二部分的时候,回调已被调用。
With breakpoints, your code works, because by the time that the second part of the code is reached, the callback has already been called.
这篇关于主叫chrome.tabs.query后,结果是不可用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!