Google 크롬의 확장 변수에 일치하지 않는 변수 값

Question

기본적으로 북마크를 사용하는 Chrome 용 확장 프로그램을 작성하고 있습니다. 다음 코드는 팝업 html 파일에 있으며 bodyHelper() 함수가 본문 onload 이벤트에서 호출되고 있습니다. "TestFolder"라는 북마크 폴더가 있는지 확인해야합니다. 폴더가 있으면 폴더 내의 모든 책갈피를 제거합니다. 그렇지 않으면 빈 폴더가 만들어집니다.

var rootFolder = undefined; 
function bookmarkHelper() { 
    // Create TestFolder folder if it doesn't exist 
    chrome.bookmarks.getTree(function(tree) { 
     otherFolder = tree[0].children[1].children; 
     rootFolder = undefined; 
     for(i=0; i<otherFolder.length; i++) { 
      if(otherFolder[i].title == "TestFolder") { 
       rootFolder = otherFolder[i]; 
       return; 
      } 
     } 
     chrome.bookmarks.create({'parentId': "2", 
         'title': 'TestFolder'}, 
         function(newFolder) {}); 
    }); 

    // Remove all bookmarks from the rootFolder 
    for (i=0; i<rootFolder.children.length; i++) 
     chrome.bookmarks.remove(rootFolder.children[i].id); 
} 

이제 내 문제는 폴더에 북마크가 있으면 제거되지 않는다는 것입니다. 하지만 마지막 3 줄을

setTimeout(function(){ 
    for (i=0; i<rootFolder.children.length; i++) 
     chrome.bookmarks.remove(rootFolder.children[i].id); 
}, 100); 

으로 변경하면 북마크가 삭제됩니다. 별도의 경우 팝업을 검사 할 때 원래 코드를 사용하여 책갈피를 삭제합니다. 이것은 매우 이상한 일이며, 무엇을해야할지 모릅니다. 일부 익명 - 함수 스레딩 유형 개념이 누락 되었습니까? AFAIK, JS는 단일 스레드이기 때문에.

Answer 1

Chrome API 호출은 비동기식이므로 호출 순서에 따라 코드를 실행해야합니다. 또한 계속 진행하기 전에 북마크 폴더가 생성 될 때까지 기다리고 싶다고 가정하면 bookmarkHelper 전체를 비동기 방식으로 다시 작성해야합니다.

function bookmarkHelper(callback) { 
    // Create TestFolder folder if it doesn't exist 
    chrome.bookmarks.getTree(function(tree) { 
     otherFolder = tree[0].children[1].children; 
     rootFolder = undefined; 
     for(i=0; i<otherFolder.length; i++) { 
      if(otherFolder[i].title == "TestFolder") { 
       rootFolder = otherFolder[i]; 

       //"return" here wouldn't return from bookmarkHelper as you probably expect 
       break; 
      } 
     } 

     //it would be easier to always just recreate TestFolder 
     if(rootFolder == undefined) { 
      chrome.bookmarks.create({'parentId': "2", 'title': 'TestFolder'}, callback); 
     } else { 
      // Remove whole rootFolder subtree 
      chrome.bookmarks.removeTree(rootFolder, function() { 
       chrome.bookmarks.create({'parentId': "2", 'title': 'TestFolder'}, callback);    
      }); 
     } 
    }); 


} 

//usage 
bookmarkHelper(function(testFolder) { 
    //do something with testFolder 
}); 

는 항상 전체 트리를 제거하고, 그렇지 않으면 당신은 불쾌한 인 계속하기 위해 병렬로 실행 chrome.bookmarks.remove 콜백의 전체 무리가 완료되면 모니터링 할 필요가 있기 때문에 그것을 다시 그것을 다시 만들어.

Answer 2

올바른데, JavaScript는 단일 스레드이지만, 종종 특정 기능이 수행을 마쳤을 때 '콜백'을 사용하여 다음 코드 행을 계속 실행할 수있게합니다.

chrome.bookmarks.getTree()에 전달중인 함수가 즉시 실행되지 않습니다. 대신 chrome.bookmarks.getTree이 작업을 마친 후 실행되고 결과가 전달됩니다. 그 동안 기다릴 필요가 없으므로 코드가 바로 실행됩니다.

마지막 세 줄을 chrome.bookmarks.getTree에 전달되는 함수로 옮기면보다 현명한 결과를 얻을 수 있습니다.