ブレークポイントがない場合、Chrome 拡張機能のタブ情報が空のように表示されるのはなぜですか?

非同期関数呼び出し: Chrome タブ情報取得の遅延を理解する

Chrome 拡張機能の開発中に、chrome.tabs.query を通じて取得された結果が次のように表示されるという問題が発生しました。コードがブレークポイントなしで実行された場合は使用できません。この問題を分析するために、chrome.tabs.query 関数の非同期の性質を詳しく調べます。

非同期関数呼び出し

chrome.tabs.query のような非同期関数は、次の場所でコードを実行します。メインの実行フローとは独立した、後の時点。コード スニペット内:

// Initialize an empty array
var fourmTabs = new Array();
// Initiate asynchronous `chrome.tabs.query` call
chrome.tabs.query({}, function (tabs) {
    // Iterate over returned tabs
    for (var i = 0; i < tabs.length; i++) {
        // Store tabs in array
        fourmTabs[i] = tabs[i];
    }
});

このコードを実行すると、chrome.tabs.query 呼び出しが実行されてリクエストが開始されますが、JavaScript の実行は次の行に続きます。 chrome.tabs.query の 2 番目の引数として指定されたコールバック関数は、すぐには呼び出されません。

// Print tab URLs (before callback has been called)
for (var i = 0; i < fourmTabs.length; i++) {
    if (fourmTabs[i] != null)
        window.console.log(fourmTabs[i].url);
    else {
        window.console.log("??" + i);
    }
}

上記のコードでは、ループが実行されるとき、コールバック関数が次の値を持っているため、fourmTabs 配列はまだ空です。まだ呼ばれていません。したがって、コンソールには「??」と出力されます。

ブレークポイントを使用すると、コードの実行が一時停止され、コールバック関数が実行して fourmTabs 配列を更新できるようになります。これにより、2 番目のループが更新されたタブ情報にアクセスし、URL が正しく出力されるようになります。

問題の解決

この問題を解決し、コードを実行したときにタブが使用できるようにするにはブレークポイントを使用するには、2 番目のループを chrome.tabs.query のコールバック関数内に移動します。これにより、コールバックが呼び出された後にループが実行されることが保証されます。

// Initialize an empty array
var fourmTabs = new Array();
// Initiate asynchronous `chrome.tabs.query` call
chrome.tabs.query({}, function (tabs) {
    // Update `fourmTabs` array
    for (var i = 0; i < tabs.length; i++) {
        fourmTabs[i] = tabs[i];
    }
    // Print tab URLs (after callback has been called)
    for (var i = 0; i < fourmTabs.length; i++) {
        if (fourmTabs[i] != null)
            window.console.log(fourmTabs[i].url);
        else {
            window.console.log("??" + i);
        }
    }
});

この変更により、2 番目のループは fourmTabs 配列が呼び出された後にのみ実行されるため、コードはブレークポイントを必要とせずに正しく実行されます。コールバック関数によって更新されました。

以上がブレークポイントがない場合、Chrome 拡張機能のタブ情報が空のように表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。