Javascript generators with (a)synchronous functionality

So I’ve been trying to wrap my head around a possible solution but my attempts to stub out a simple example have been unsuccessful.

So I have an array of data that looks something like this:

const arr = [{
  "content": "FIRST_CONTENT_HERE",
  "callback": function callback () {}
},
{
  "content": "SECOND_CONTENT_HERE",
  "callback": function callback () {}
},
{
  "content": "THIRD_CONTENT_HERE",
  "callback": function callback () {}
},
{
  "content": "THIRD_CONTENT_HERE",
  "callback": function callback () {}
}
];

I want to create a generator to iterate through that array but not return (yield?) control back to the next iteration until that callback function has been executed. I tried wrapping that callback in a promise and made it so that the promise wouldn’t resolve until that callback was executed. I tried making sure that the callback was an async function to wrap that promise instead. I tried a few things but I just wasn’t able to get them to work. After I called the generator function and iterated through it, it just blew through each element of the array. No matter how I set up the loop, it never waited for the callback to execute before it moved on to the next iteration.

I searched around on but most examples that I found of generators and how they interacted with promises (or async functions), the examples only ever showed something like this yield Promise.resolve(x) which isn’t what I want. I don’t want it to resolve right away — I need it to wait until the callback is executed. And the callback would be set up as an onclick handler (to close out a dialog) and would be executed only when that event occurs. So basically, the next dialog shouldn’t instantiate until the previous has been closed. So for each loop of the array, a few things happen:

• Instantiates a dialog
• Sets up an onclick handler for that dialog. Ultimately, callback() is to be executed somewhere therein.
• I can wrap the callback in a function that returns a Promise (or something along these lines) where the promise doesn’t resolve until that event fires. So when it fires, it both resolves the promise and executes the callback.
• When that happens, the iterator/generator moves on to the next iteration and instantiates the next dialog. And then the next until the original array has been looped

I’m not saying that my approach is correct. I could be totally and completely off base. But there is something niggling in the back of my head that generators and Promises are the way to go.

How would I best implement the functionality I’m trying to achieve? As I said, I just can’t wrap my head around this…

Here’s an example of some code that I wrote. This has gone through several changes as I tried different things. I’m using fetch() here because I know that it returns a Promise. I’m convinced that Promises need to feature somewhere in my solution to make sure that my non-async callback() is executed before control moves on. It’s fugly but I was just trying different proofs of concept.

      async function runRequest(url) {
        const response = await fetch(url);

        return response;
      }

      async function* setupGenerator(arr) {
        for (let i = 0; i < arr.length; i++) {
          const response = await runRequest(arr[i]);
          yield response;
        }
      }

      const urls = [
        '/activityViewer/index.html',
        '/message/index.html',
        '/users/index.html',
      ];
debugger;
      const generator = setupGenerator(urls);
      for (let response of generator) {
          console.log('In FOR loop; response; ', response);
      }

thnx,
Christoph