Utilizing Promise and setTimeout in a generator function to develop an asynchronous generator: A comprehensive guide

Question

Utilizing Promise and setTimeout in a generator function to develop an asynchronous generator: A comprehensive guide

I am currently working on creating a generator function that produces an async generator. This Generator will yield a deferred value at each time, using promises. The values and their respective delays (in milliseconds) are sourced from two separate arrays.

For the provided example code, the expected output is a sequential logging of each value from the target array along with its corresponding (matching index) delay from the timeArray. Each value should be logged one after the other, waiting for the specified delay, until the end of the iteration through the target array.

I attempted to run the code below, however it only displays the first 2 elements in the timeArray and does not log all the subsequent elements. I am uncertain if it prints them after the first two time intervals specified in the timeArray.

let j = 0;

// Array representing the delay before printing each number.
var timeArray = [6, 68, 51, 41, 94, 65, 47, 85, 76, 136];

// Array containing the numbers to be printed.
var targets = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7];

let generator = generateSequence();

async function* generateSequence(casiInfluence) {
  yield new Promise((resolve, reject) => {
    setTimeout(() => resolve(console.log(targetArray[j]), timeArray[j]); console.log(timeArray[j]);
  });
}
(async function main() {
  for await (var result of generateSequence()) {
    console.log(result);
    j++;
    result = generator.next();
  }
}());

javascript function async-await promise generator

Answer 1

Answer №1

You initiated the generator using

let generator = generateSequence()

, however, you did not proceed to iterate through its values.

(To enhance readability with more descriptive variable names, the code is as follows):

var timeArray = [6, 68, 51, 41, 94, 65, 47, 85, 76, 136];// An array indicating the delay before printing each number
var targets = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7];// An array of numbers to be printed

var generator = generateSequence();

( async () => {

    for await ( const printNumber of generator ) {
        /* No action needed in this loop as accessing the generator's properties logs data */
    }

} )()

async function* generateSequence() {
    for ( const i in timeArray ) {
        const delay = timeArray[ i ];
        const numberToPrint = targets[ i ];
        await waitForPrint( numberToPrint, delay );
        yield;
    }
}

function waitForPrint( text, delay ) {
    return new Promise( (resolve,reject) => {
        setTimeout(
            () => {
                console.log( text );
                resolve();
            },
            delay
        )
    })
}

A generator-free alternative:


var timeArray = [6, 68, 51, 41, 94, 65, 47, 85, 76, 136];// Array showing the delay before printing each number
var targets = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7];// Numbers to be printed


for( let scheduledTimeMS=0, i=0; i<timeArray.length; i++ ) {

    const numberToPrint = targets[ i ];
    const delay = timeArray[ i ];

    scheduledTimeMS += delay;

    setTimeout( () => console.log( numberToPrint ), scheduledTimeMS );

}

Answer 2

You initiated the generator using

let generator = generateSequence()

, however, you did not proceed to iterate through its values.

(To enhance readability with more descriptive variable names, the code is as follows):

var timeArray = [6, 68, 51, 41, 94, 65, 47, 85, 76, 136];// An array indicating the delay before printing each number
var targets = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7];// An array of numbers to be printed

var generator = generateSequence();

( async () => {

    for await ( const printNumber of generator ) {
        /* No action needed in this loop as accessing the generator's properties logs data */
    }

} )()

async function* generateSequence() {
    for ( const i in timeArray ) {
        const delay = timeArray[ i ];
        const numberToPrint = targets[ i ];
        await waitForPrint( numberToPrint, delay );
        yield;
    }
}

function waitForPrint( text, delay ) {
    return new Promise( (resolve,reject) => {
        setTimeout(
            () => {
                console.log( text );
                resolve();
            },
            delay
        )
    })
}

A generator-free alternative:


var timeArray = [6, 68, 51, 41, 94, 65, 47, 85, 76, 136];// Array showing the delay before printing each number
var targets = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7];// Numbers to be printed


for( let scheduledTimeMS=0, i=0; i<timeArray.length; i++ ) {

    const numberToPrint = targets[ i ];
    const delay = timeArray[ i ];

    scheduledTimeMS += delay;

    setTimeout( () => console.log( numberToPrint ), scheduledTimeMS );

}

Answer 3

Answer №2

When moving towards developing a generator for deferred values, the OP could undertake several steps such as:

Converting both arrays of the OP into a more manageable data structure like an array of tuples where each tuple consists of [<value>, <delay>].
Transforming each value-delay tuple into a deferred value action through an async function that generates and returns a promise. This promise will resolve the value after a specific delay provided in delay. The function used to create this async function is called createDeferredValue.
Generating an async generator from the array of async functions with the help of a function named createPoolOfDeferredValues.

// - a specific helper which creates an async function
//   (encapsulating a promise) for each to be deferred value.
function createDeferredValue(value, delay) {
  return async function () {
    return await (
      new Promise(resolve => setTimeout(resolve, delay, value))
    );
  };
}

// - another helper which creates an async generator
//   from an array of async functions.
async function* createPoolOfDeferredValues(deferredValueList) {
  const asyncFunctions = [...deferredValueList];

  let asyncFct;
  while (asyncFct = asyncFunctions.shift()) {

    yield (await asyncFct());
  }
}


// - array that defines how long after each to be
//   processed value the next value will be processed.
const valueDelays = [600, 680, 510, 410, 940, 650, 470, 850, 760, 1360];

// - array of to be processed target values.
const targetValues = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7]


// - maps both above OP's arrays into a
//   better processable data-structure.
const targetEntries = targetValues
  .map((value, idx) => [value, valueDelays[idx]]);

console.log({ targetEntries });

// - helper task which creates a list of async functions.
const deferredValueList = targetEntries
  .map(([value, delay]) =>
    createDeferredValue(value, delay)
  );

// create an async generator ...
const poolOfDeferredValues =
  createPoolOfDeferredValues(deferredValueList);

(async () => {
  // ... and iterate over it.
  for await (const value of poolOfDeferredValues) {
    console.log({ value });
  }
})();

console.log('... running ...');

.as-console-wrapper { min-height: 100%!important; top: 0; }

However, once the list/array of async functions is created, it is possible to directly iterate over it using for...await without the need for an async generator. Therefore, the code can be simplified as follows:

// - a specific helper which creates an async function
//   (encapsulating a promise) for each to be deferred value.
function createDeferredValue(value, delay) {
  return async function () {
    return await (
      new Promise(resolve => setTimeout(resolve, delay, value))
    );
  };
}

// - array that defines how long after each to be
//   processed value the next value will be processed.
const valueDelays = [600, 680, 510, 410, 940, 650, 470, 850, 760, 1360];

// - array of to be processed target values.
const targetValues = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7]


// - maps both above OP's arrays into a
//   better processable data-structure.
const targetEntries = targetValues
  .map((value, idx) => [value, valueDelays[idx]]);

console.log({ targetEntries });

// - helper task which creates a list of async functions.
const deferredValueList = targetEntries
  .map(([value, delay]) =>
    createDeferredValue(value, delay)
  );

(async () => {
  // - iterate the list of async functions by `for...await`.
  for await (const deferredValue of deferredValueList) {
    const value = await deferredValue();
    console.log({ value });
  }
})();

console.log('... running ...');

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 4

When moving towards developing a generator for deferred values, the OP could undertake several steps such as:

Converting both arrays of the OP into a more manageable data structure like an array of tuples where each tuple consists of [<value>, <delay>].
Transforming each value-delay tuple into a deferred value action through an async function that generates and returns a promise. This promise will resolve the value after a specific delay provided in delay. The function used to create this async function is called createDeferredValue.
Generating an async generator from the array of async functions with the help of a function named createPoolOfDeferredValues.

// - a specific helper which creates an async function
//   (encapsulating a promise) for each to be deferred value.
function createDeferredValue(value, delay) {
  return async function () {
    return await (
      new Promise(resolve => setTimeout(resolve, delay, value))
    );
  };
}

// - another helper which creates an async generator
//   from an array of async functions.
async function* createPoolOfDeferredValues(deferredValueList) {
  const asyncFunctions = [...deferredValueList];

  let asyncFct;
  while (asyncFct = asyncFunctions.shift()) {

    yield (await asyncFct());
  }
}


// - array that defines how long after each to be
//   processed value the next value will be processed.
const valueDelays = [600, 680, 510, 410, 940, 650, 470, 850, 760, 1360];

// - array of to be processed target values.
const targetValues = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7]


// - maps both above OP's arrays into a
//   better processable data-structure.
const targetEntries = targetValues
  .map((value, idx) => [value, valueDelays[idx]]);

console.log({ targetEntries });

// - helper task which creates a list of async functions.
const deferredValueList = targetEntries
  .map(([value, delay]) =>
    createDeferredValue(value, delay)
  );

// create an async generator ...
const poolOfDeferredValues =
  createPoolOfDeferredValues(deferredValueList);

(async () => {
  // ... and iterate over it.
  for await (const value of poolOfDeferredValues) {
    console.log({ value });
  }
})();

console.log('... running ...');

.as-console-wrapper { min-height: 100%!important; top: 0; }

However, once the list/array of async functions is created, it is possible to directly iterate over it using for...await without the need for an async generator. Therefore, the code can be simplified as follows:

// - a specific helper which creates an async function
//   (encapsulating a promise) for each to be deferred value.
function createDeferredValue(value, delay) {
  return async function () {
    return await (
      new Promise(resolve => setTimeout(resolve, delay, value))
    );
  };
}

// - array that defines how long after each to be
//   processed value the next value will be processed.
const valueDelays = [600, 680, 510, 410, 940, 650, 470, 850, 760, 1360];

// - array of to be processed target values.
const targetValues = [9, 10, 8, 7, 9, 7, 7, 9, 9, 7]


// - maps both above OP's arrays into a
//   better processable data-structure.
const targetEntries = targetValues
  .map((value, idx) => [value, valueDelays[idx]]);

console.log({ targetEntries });

// - helper task which creates a list of async functions.
const deferredValueList = targetEntries
  .map(([value, delay]) =>
    createDeferredValue(value, delay)
  );

(async () => {
  // - iterate the list of async functions by `for...await`.
  for await (const deferredValue of deferredValueList) {
    const value = await deferredValue();
    console.log({ value });
  }
})();

console.log('... running ...');

.as-console-wrapper { min-height: 100%!important; top: 0; }

Utilizing Promise and setTimeout in a generator function to develop an asynchronous generator: A comprehensive guide

Answer №1

Answer №2

Similar questions

Having trouble with the anchor tag not functioning properly

Using Props with jQuery in React Components: A Comprehensive Guide

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

Obtain the accurate sequence of tr elements in the form of a jQuery object

Creating an If statement tailored for a particular image source: a step-by-step guide

Node.js exporting fails due to an undefined variable

What causes the offsetWidth attribute to be zero in an array of elements within the DOM?

Ways to integrate a security protocol with a graphql resolver

Generating a list of objects from an array of strings

What steps should I take to make my Vue JS delete function operational?

JQuery form not triggering the submit event

Can you clarify the dissimilarity between `knex().select("id").from("users")` and `knex("users").select("id")` in Knex?

React.js is throwing a 429 error message indicating "Too Many Requests" when attempting to send 2 requests with axios

When attempting to use the $http get command, an error may occur due

When using Thunderbird Webextensions, calling .messages.getFull() may result in the Exception 0x80004005 being raised, specifically indicating

The beauty of asynchronous GET requests in VueJS

Submitting a form within AJAX-powered tabs (using the Twitter Bootstrap framework)

Creating unique appbars for different sections on my sidebar in ReactJs

Utilize Next.js and GSAP to dynamically showcase images upon hovering over the title

Updating columns in MongoDB using arrays in JavaScript has just gotten easier