내 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의 두 번째 인수로 제공된 콜백 함수는 즉시 호출되지 않습니다.

// 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 배열을 실행하고 업데이트할 수 있습니다. 이렇게 하면 두 번째 루프가 업데이트된 탭 정보에 액세스하고 URL을 올바르게 인쇄할 수 있습니다.

문제 해결

이 문제를 해결하고 코드가 실행될 때 탭을 사용할 수 있는지 확인하려면 중단점을 사용하려면 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);
        }
    }
});

이 수정을 사용하면 두 번째 루프는 fourmTabs 배열이 호출된 후에만 실행되므로 중단점 없이 코드가 올바르게 실행됩니다. 콜백 기능으로 업데이트되었습니다.

위 내용은 내 Chrome 확장 프로그램의 탭 정보가 중단점 없이 비어 있는 것처럼 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!