JavaScript 不等待循环

Question

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

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 仍然为空时，分组功能起作用。所以它给出了错误。

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

Answer 1

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 2

函数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)}) 
             }
        })
    }

Answer 3

您可以 promisify 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)})

})()

JavaScript 不等待循环

JavaScript doesn't wait for loop

javascript

asynchronous

google-chrome-extension