How can I invoke callback style functions concurrently?

December 30, 2021

(A prior version of this question was closed as a dup of how to invoke async functions in a loop. This version states clearly that the functions are not async)

I have several callback style functions which cannot be modified. Only changing the ABC function, how can I get the output in the same order as the function present in the D variable. I have tried using async-await but getting the output as [‘123’, ‘ankit’, ‘345’] because of the timeout event.

https://jsfiddle.net/ankitg1602/unrxv3k6

const A = (dev) => {
  setTimeout(() => {
    dev('ankit')
  }, 300)
}

const B = (dev) => {
  setTimeout(() => {
    dev('123')
  }, 50)
}

const C = (dev) => {
  setTimeout(() => {
    dev('345')
  }, 500)
}

const D = [A, B, C]

const ABC = (args, dev) => {
  // write your code here
  Promise.all(D.map(async (fun1) => {
    return await fun1(dev)
  }))
}

ABC(D, (result) => {
   console.log('result:', result) // ['ankit', 123, 345]
})

>Solution :

The idea is to promisify the callback style functions. Below, a promise is created for each that resolves when the function calls its callback.

Map over promisfy to produce an array of async functions. Invoke each of them to collect an array of promises, then resolve the promises concurrently with Promse.all()

const A = (dev) => {
  setTimeout(() => {
    dev('ankit')
  }, 300)
}

const B = (dev) => {
  setTimeout(() => {
    dev('123')
  }, 50)
}

const C = (dev) => {
  setTimeout(() => {
    dev('345')
  }, 500)
}

const D = [A, B, C]

const ABC = async(args, dev) => {
  const promisify = fn => () => new Promise(resolve => fn(resolve));
  const promises = args.map(fn => promisify(fn)());
  Promise.all(promises).then(dev)
}

ABC(D, (result) => {
  console.log('result:', result) // ['ankit', 123, 345]
})