為什麼我的`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 是一個非同步函數，這表示它的回呼是獨立於後續程式碼執行的。使用斷點時，程式碼執行會在第一個斷點暫停，從而允許回呼在執行第二個循環之前完成。如果沒有斷點，第二個循環將在第一個循環之後立即執行，然後 chrome.tabs.query 回呼有時間收集選項卡資料。因此，在第二個循環中存取 fourmTabs 陣列時，其為空。

要解決此問題並確保程式碼正確運行，需要將第二個循環移至 chrome.tabs.query 的回呼函數內。這樣，保證僅在檢索到選項卡資料後才執行第二個循環：

<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中文網其他相關文章！