How to create a loop that can be programatically iterated when inner callback is executed?

Question

I am iterating over an array of assets, I need to load each of these assets to gpu (using third party library for this). Loader provided by such third party library has a callback function that is executed when asset is loaded i.e. right now I have something like this

assetsArr.forEach(asset => {
   myLoader.upload(asset, () => {
      // Go to next loop / iteration here
   })
});

Since this callback is not executed right away I am currently in a situation where my loop finishes before my assets are actually loaded leading to some issues in my app.

Is there a way to loop over assetsArr, but only go to next iteration / loop once that callback is executed?

A generator might be good here, where the .next() function does the upload and returns true when there are assets left to upload. — Gavin
– Gavin, Commented Aug 5, 2020 at 9:15

Jamiec · Accepted Answer · 2020-08-05 09:38:13Z

1

You could do this by wrapping myLoader in a Promise. As I dont have the code for myLoader I'll simulate it with a delay which just waits a few seconds.

async function dummyUpload(asset){
    return new Promise(resolve => {
         console.log("dummyUpload",asset);
         setTimeout(resolve,3000);
    });
}

async function test(assets){
    for(var i=0;i<assets.length;i++){
        var asset = assets[i];
        console.log("starting",asset);
        await dummyUpload(asset);
        console.log("finished",asset);
    };
}
var assets = [1,2,3];
test(assets);

The way to wrap your upload function is fairly simple:

async function loaderFunction(asset){
    return new Promise( resolve => {
        myLoader.upload(asset, resolve);
    });
}

You may also want to check if your "loader" supports a Promise-based interface which would be better than wrapping in another Promise.

edited Aug 5, 2020 at 9:38

answered Aug 5, 2020 at 9:19

Jamiec

136k15 gold badges143 silver badges202 bronze badges

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

3 Comments

Robo Robok Over a year ago

I love wrapping things in Promises and using async/await approach. It doesn't get any cleaner that this. Synchronous code style is the most convenient one, always.

Jamiec Over a year ago

@RoboRobok Yes just note my last line, so you dont fall into the promise-wrapping anti-pattern

Robo Robok Over a year ago

That was an interesting read, thanks. Always keen on learning another anti-pattern :D

Karan · Accepted Answer · 2020-08-05 09:25:00Z

0

Create function loader like below and call it with loader(assetsArr, 0);. Inside callback function at the end add code index++; and check if (index < assetsArr.length) then loader(assetsArr, index);.

Test it below. For testing I have added custom code for myLoader.

let myLoader = {
  upload : (asset, callback) => setTimeout(callback, 1000)
};

let assetsArr = [1, 2, 3];

function loader(assetsArr, index) {
  let asset = assetsArr[index];
  myLoader.upload(asset, () => {
    console.log(index);
    // Go to next loop / iteration here      
    index++;
    if (index < assetsArr.length) {
      loader(assetsArr, index);
    }
  })
}

loader(assetsArr, 0);

edited Aug 5, 2020 at 9:25

answered Aug 5, 2020 at 9:19

Karan

12.7k3 gold badges31 silver badges45 bronze badges

1 Comment

Udith Gunaratna Over a year ago

If OP needs to perform some other task after all the assets are uploaded, you may need to either accept a callback from the loader function or loader function should return a promise. Once the last asset is loaded (else branch of your if), that callback should be invoked or the promise should be resolved.

Collectives™ on Stack Overflow

How to create a loop that can be programatically iterated when inner callback is executed?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related