使用超时解析包含Promises数组的Promise.all

Question

In the below example I'd like to resolve each element of the array after a couple of seconds. How it behaves now is it will solve the Promise after 4 seconds, I expect it to resolve after 16seconds because there is 4 element.

const numbers = [1, 2, 3, 4];

const promises = numbers.map(number => {
    return new Promise(resolve => {
        setTimeout(() => {
          console.log(number);
            resolve(number);
        }, 4000);
    });
});


Promise.all(promises).then( () => {
    console.log("Done");
});

Answer 1

Using the new Async / Await, that's now pretty much widely implemented. And if not, you can transpile for old browsers.

You can create code, that's much more linear and easier to follow.

It's also worth mentioning, bluebird has a promise based map, that has a concurrency option that would be ideal for the map bit.

 const numbers = [1, 2, 3, 4]; async function delay(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } //pretend show number async async function showNumber(l) { return new Promise((resolve) => { setTimeout(() => { console.log(numbers[l]); resolve(); }); }); } async function doNumbers() { for (let l = 0; l < numbers.length; l ++) { await delay(4000); await showNumber(l); } console.log("Done"); } doNumbers(); 

Answer 2

This is the normal behaviour, because the Promise are asyncronous and practically concurrent. Promise.all simply wait for all promises to be complete, it isn't an elaboration queue which call a promise after the other. If you want to execute the operations one after the other simply don't use promises, use a normal sync cycle :)

Answer 3

It passes all values to the map function and then iterates over them and creates asynchronous work for them 4 seconds. It is not going to call setTimeout after each another.

Your 4 seconds are related only to the setTimeout 's callback, not to the map function, which means that the callback will be called at least after 4 seconds. So engine creates different thread for the setTimeout and left it to be called after 4 seconds. When the time is elapsing for the first one in another thread, in JS thread it passes the second value and do the same thing for each item.

One solution can be done using RxJS

 Rx.Observable.from([1,2,3,4]).map(value => Rx.Observable.of(value).delay(4000)).concatAll().subscribe(x => console.log(x)); 

 <script src='https://unpkg.com/@reactivex/rxjs@5.4.3/dist/global/Rx.js'></script> 

Answer 4

Increment your timer everytime, by multiplying it by number :

 const numbers = [1, 2, 3, 4]; const promises = numbers.map(number => { return new Promise(resolve => { setTimeout(() => { console.log(number); resolve(number); }, number*4000); }); }); Promise.all(promises).then( () => { console.log("Done"); }); 

It displays "Done" after 16 seconds.

Answer 5

When you create promises, the timeouts will be set for 4 seconds and will expire simultaneously after ~4 seconds. To achieve desired behaviour, you can do something like this:

const numbers = [1, 2, 3, 4];

const promises = numbers.map((number, i) => {
    return new Promise(resolve => {
        setTimeout(() => {
          console.log(number); 
            resolve(number);
        }, 4000*(i+1));
    });
});


Promise.all(promises).then( () => {
    console.log("Done");
});

Answer 6

If you need to run each promise in sequential, not in parallel. you can use async functions and then await on promises in sequent. for none async function solutions, you can use this functional older solution. using array reduce method. pay attention I'm generating an array of functions and each function returns a promise.

const numbers = [1, 2, 3, 4];

numbers.map(number => () => {
    return new Promise(resolve => {
       setTimeout(() => {
           console.log(number);
           resolve(number);
       }, 4000);
    });
}).reduce(
    (promise, asyncJob) => promise.then(() => asyncJob()),
    Promise.resolve()
).then(() => { console.log('done'); });