Asynchronous call stack execution gap

Question

I am reading "Eloquent JavaScript" and at the end of Asynchronous chapter there is a section about execution gap in asynchronous operations and it shows an example. The example code below from the book is not runable as it uses some made up scenario.

function anyStorage(nest, source, name) {
   if (source == nest.name) return storage(nest, name); else return routeRequest(nest, source, "storage", name);
}

async function chicks(nest, year) {
   let list = "";
   await Promise.all(network(nest).map(async name => {
     list += `${name}: ${
     await anyStorage(nest, name, `chicks in ${year}`)
   }\n`; }));
   return list;
 }

It says the problem with this code, as I understand, is each asynchronous call e.g. anyStorage will actually concatenate an empty list and can't see the mutation from other asynchronous calls.

I tried to replicate this problem as below:

function delay(n) {
    return Promise.resolve(setTimeout(()=>{}, n*1000));
}

async function asyncSum(a) {
    let sum = 0;
    await Promise.all(a.map(async i => sum += await delay(i)));
    return sum;
}

asyncSum([1,2,3,4]).then(value => console.log(value));

But this works as expected. It prints the sum correctly. So did I misunderstand the book or there is something wrong with my example?

a) Your `delay` function is implementing the [promisification of `setTimeout` incorrectly](https://stackoverflow.com/a/33292942/1048572) b) your `delay` function does not return a promise that resolves to the `n` argument — Bergi, May 16 '22 at 01:09

CertainPerformance · Accepted Answer · 2022-05-16T01:38:21.243

The problem in the original code is that here:

list += `${name}: ${ await ...

The list += is like doing list = list + - but the second list:

list = list +
       ^^^^

refers to the list at that moment - before any of the asynchronous calls have completed. Eventually one of them will complete and assigns to list. But once the next one resolves, because the list it has refers to the original one, not the newly updated one, the prior results will be lost.

Here's a demo:

const getMultipliedNum = num => Promise.resolve(num * 3);

(async() => {
  let list = "";
  await Promise.all([1, 2, 3].map(async num => {
    list += `${num}: ${ await getMultipliedNum(num)}\n`;
  }));
  console.log(list);
})();

Your example has the same issue, though the delay function is broken - the result is 4, which is only the result of the final setTimeout call (because setTimeout returns the timeout ID). Fixing it to demonstrate the problem:

function delay(n) {
    return Promise.resolve(n);
}

async function asyncSum(a) {
    let sum = 0;
    await Promise.all(a.map(async i => sum += await delay(i)));
    return sum;
}

asyncSum([1,2,3,4]).then(value => console.log(value));

The result is 4, rather than 10 - this demonstrates that sum += await somethingElse inside a parallel loop doesn't work.

Another way of looking at it:

sum += await somethingElse

is like doing

const currentValueOfSum = sum;
sum = currentValueOfSum + await somethingElse;

Oh gosh, not sure why I used `setTimeOut` to simulate a promise. Silly me! Thanks for this! — dragonfly02, May 16 '22 at 02:28

Asynchronous call stack execution gap

1 Answers1