Following the completion of every asynchronous operation, a callback will be executed

Question

Following the completion of every asynchronous operation, a callback will be executed

I am facing a situation where I have an array of images that are uploaded with a series of asynchronous operations as shown below:

for ( let key in imageFileObject ) {
  const imageFile = imageFileObject[key]
  dispatch('get_signed_request', imageFile)
}

Every time the dispatch function is called, it triggers numerous other asynchronous operations.

My goal is to determine when all these operations have been completed so that I can proceed with further actions.

Is there a way to accomplish this?

javascript asynchronous

Answer 1

Answer №1

Give this a try:

let remainingImages = Object.keys(imageFileObject).length;

for (var prop in imageFileObject) {
  const img = imageFileObject[prop];
  dispatch('get_signed_request', img).then((response)=> {
     remainingImages--;
     if(remainingImages === 0){
        // process complete
     } 
  });
}

An example you can run in the console to see it in action:

var asyncFunc = () => {
   return new Promise((resolve,reject)=> {
          setTimeout(() => { console.log("task completed"); resolve() },1000);
   });
}

let tasks = [asyncFunc, asyncFunc, asyncFunc];

let totalTasks = tasks.length;

for (let task of tasks) { 
  task().then((result)=> {
     totalTasks--;
     if(totalTasks === 0){
        console.log("all tasks finished");
     } 
  });
}

Answer 2

Give this a try:

let remainingImages = Object.keys(imageFileObject).length;

for (var prop in imageFileObject) {
  const img = imageFileObject[prop];
  dispatch('get_signed_request', img).then((response)=> {
     remainingImages--;
     if(remainingImages === 0){
        // process complete
     } 
  });
}

An example you can run in the console to see it in action:

var asyncFunc = () => {
   return new Promise((resolve,reject)=> {
          setTimeout(() => { console.log("task completed"); resolve() },1000);
   });
}

let tasks = [asyncFunc, asyncFunc, asyncFunc];

let totalTasks = tasks.length;

for (let task of tasks) { 
  task().then((result)=> {
     totalTasks--;
     if(totalTasks === 0){
        console.log("all tasks finished");
     } 
  });
}

Answer 3

Answer №2

In the case that imageFileArray is actually an array, and the function dispatch yields a promise, you can simply execute the following:

Promise.all(imageFileArray.map(file => dispatch('get_signed_request', file)))
  .then(results => console.log("completed"));

Answer 4

In the case that imageFileArray is actually an array, and the function dispatch yields a promise, you can simply execute the following:

Promise.all(imageFileArray.map(file => dispatch('get_signed_request', file)))
  .then(results => console.log("completed"));

Answer 5

Answer №3

If you want to wait for all promises in an iterable argument to resolve, you can make use of the Promise.all method. It returns a promise that resolves only when all the individual promises have resolved successfully, or rejects with the reason of the first promise that gets rejected.

You can find more information about this in the Mozilla documentation here.

Promise
    .all(fileArray.map(file => dispatch('get_signed_request', file)))
    .then(data => console.log("All your asynchronous operations have completed"));

Answer 6

If you want to wait for all promises in an iterable argument to resolve, you can make use of the Promise.all method. It returns a promise that resolves only when all the individual promises have resolved successfully, or rejects with the reason of the first promise that gets rejected.

You can find more information about this in the Mozilla documentation here.

Promise
    .all(fileArray.map(file => dispatch('get_signed_request', file)))
    .then(data => console.log("All your asynchronous operations have completed"));

Following the completion of every asynchronous operation, a callback will be executed

Answer №1

Answer №2

Answer №3

Similar questions

Overlapping Divs - HTML Elements Crossing Paths

Guidelines for managing UnprocessedItems with the AWS JavaScript SDK for dynamoDB

css failing to load properly following javascript redirection

Tips for creating a concise summary of written content

The circular reference error in Typescript occurs when a class extends a value that is either undefined, not a constructor,

Encountering an issue with react-dom that needs to be resolved

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

Exploring the differences between an XMLHTTP request and a string and establishing a callback mechanism

We were unable to locate the requested resource

What is the best way to organize data subsets in Firebase?

What could be causing all the flickering in this presentation?

The output returned by an AngularJS controller

Executing the stop button in the browser with Webdriver IO

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

The specified property cannot be found within the type 'JSX.IntrinsicElements'. TS2339

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

For each variable, assign a value

Obscured painting surface appearance using Three.js

A demonstration of VueJS Nested Builder functionality

Run the function multiple times by substituting a portion of the argument in a sequential