JavaScript doesn't wait for loop

Question

I'm making a Google Chrome extension. I'm trying to open new tabs and group them. I have urls as an array. But chrome.tabs.group function doesn't wait until all tabs open.

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

The group function works when the ourTabIds is still empty. So it gives errors.

Why it doesn't wait? How can I fix that?

Does this answer your question? Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference — Heretic Monkey
– Heretic Monkey, Commented Mar 26, 2021 at 11:42
Add code in the create callback that compares ourTabIds.length with urls.length and calls group when they are equal. — Heretic Monkey
– Heretic Monkey, Commented Mar 26, 2021 at 11:44

Jamiec · Accepted Answer · 2021-03-26 11:55:28Z

1

You could promisify chrome.tabs and then use Promise.all

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

and then you code becomes

(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)})

})()

answered Mar 26, 2021 at 11:55

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

I2mNew Over a year ago

It's more cool solution yes but I have to understand, normally when I write a loop, does not the code below the loop wait until the loop finish?

Jamiec Over a year ago

@I2mNew in your original code, no. Because the call you're making is asynchronous (see the link under your question someone posted). In this code, yes the 2nd line (the group line) waits for the first to complete

Lennholm Over a year ago

@I2mNew It does "wait" until the loop finishes. The thing is that your loop finishes long before your callbacks to the create method runs because chrome.tabs.create() is an asynchronous process. That's the whole reason it's using callbacks in the first place.

Jamiec Over a year ago

@Lennholm That's what I was trying to say, thanks for being more succinct than me.

Nicolas I · Accepted Answer · 2021-03-26 11:47:02Z

0

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

answered Mar 26, 2021 at 11:47

Nicolas I

2344 silver badges15 bronze badges

Comments

iwaduarte · Accepted Answer · 2021-03-26 11:49:18Z

0

The function chrome.tabs.create() uses a callback as parameter. You should either convert that to Promises and finish it all with .then() or check if it is the last url (changing from of to 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)}) 
             }
        })
    }

answered Mar 26, 2021 at 11:49

iwaduarte

1,74919 silver badges26 bronze badges

2 Comments

I2mNew Over a year ago

Yes this solution and the other solutions that use length of links works, thank you. But I can't understand why my first code doesn't wait?

iwaduarte Over a year ago

It is not about waiting. It is not how callback works. See: developer.mozilla.org/en-US/docs/Glossary/Callback_function

Collectives™ on Stack Overflow

JavaScript doesn't wait for loop

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related