呼び出し後に「chrome.tabs.query」の結果が利用できないように見えるのはなぜですか?

chrome.tabs.query の非同期の性質: 呼び出し後に結果が利用できないように見える理由

Google Chrome の拡張機能の開発において、タブ情報を取得するchrome.tabs.query を使用するには、多くの場合、配列 (fourmTabs) を作成してタブ データを保存し、その内容にアクセスする必要があります。ただし、このコードが chrome.tabs.query の非同期の性質に合わせて正しく調整されていない場合、予期しない動作が発生する可能性があります。

次の例を考えてみましょう。

<code class="javascript">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>

この例では、コードchrome.tabs.query コールバックが実行された後、配列内の各タブの URL を出力しようとします。ただし、ブレークポイントを使用せずに実行すると、コンソールは空のままですが、ブレークポイントを使用すると期待どおりの結果が得られます。

この問題は、chrome.tabs.query が非同期関数であるために発生します。つまり、そのコールバックは後続のコードとは独立して実行されます。 。ブレークポイントを使用すると、コードの実行が最初のブレークポイントで一時停止し、2 番目のループが実行される前にコールバックが完了できるようになります。ブレークポイントを使用しない場合、2 番目のループは最初のループの直後、chrome.tabs.query コールバックがタブ データを収集する前に実行されます。したがって、2 番目のループでアクセスすると、fourmTabs 配列は空になります。

この問題を解決し、コードが正しく動作することを確認するには、2 番目のループを chrome.tabs.query のコールバック関数内に移動する必要があります。こうすることで、2 番目のループの実行は、タブ データが取得された後にのみ発生することが保証されます:

<code class="javascript">chrome.tabs.query({}, function (tabs) {
  var fourmTabs = new Array();
  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>

以上が呼び出し後に「chrome.tabs.query」の結果が利用できないように見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。