JavaScript 不等待循环

Question

我正在制作 Google Chrome 扩展程序。 我正在尝试打开新标签并将它们分组。 我有 urls 作为一个数组。 但是 chrome.tabs.group function 不会等到所有选项卡都打开。

var ourTabIds = []
for(const url of urls) {
    chrome.tabs.create({active: false, url : url},tab => {
         ourTabIds.push(tab.id)
    })
}
chrome.tabs.group({tabIds : ourTabIds}, groupId => {console.log(groupId)})

当 ourTabIds 仍然为空时，组 function 工作。 所以它给出了错误。

为什么不等？ 我该如何解决？

Answer 1

您可以承诺chrome.tabs然后使用Promise.all

function createTab(input){
   return new Promise(resolve => {
     chrome.tabs.create(input,tab => resolve(tab))
   });
}

然后你的代码变成

(async function doIt(){
   var tabs = await Promise.all(urls.map(url => createTab({active: false, url : url})));

   chrome.tabs.group({tabIds : tabs.map(t => t.id)}, groupId => {console.log(groupId)})

})()

Answer 2

var ourTabIds = [];
var countTabs = 0;
    for(const url of urls) {
            chrome.tabs.create({active: false, url : url},tab => {
                 ourTabIds.push(tab.id)
            countTabs++;
           if (countTabs==urls.length){
              chrome.tabs.group({tabIds : ourTabIds}, groupId => {console.log(groupId)})
            }
          })
        }
        

Answer 3

function chrome.tabs.create()使用回调作为参数。 您应该将其转换为 Promises 并使用.then() 完成所有操作，或者检查它是否是最后一个 url （从of更改为in ）

var ourTabIds = []
for(const index in urls) {
    chrome.tabs.create({active: false, url : urls[index]}, tab => {
         ourTabIds.push(tab.id)
         if (index === urls.length - 1 ) { // last url 
    //call when EVERYTHING has been pushed by the callback                 
chrome.tabs.group({tabIds : ourTabIds}, groupId => {console.log(groupId)}) 
             }
        })
    }