> 웹 프론트엔드 > JS 튜토리얼 > 호출 후 'chrome.tabs.query' 결과를 사용할 수 없는 것으로 나타나는 이유는 무엇입니까?

호출 후 'chrome.tabs.query' 결과를 사용할 수 없는 것으로 나타나는 이유는 무엇입니까?

DDD
풀어 주다: 2024-10-30 01:50:03
원래의
919명이 탐색했습니다.

Why Does My `chrome.tabs.query` Result Appear Unavailable After Calling?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿