最后的Array.forEach回调

Question

I'm using Array.forEach function of javascript to get a different message for each element of a list. So I'm using forEach function and I'm looking for a way to execute my callback function cb(result) when the foreach as finished to both execute .forEach and msgAfterTimeout . I read that there was something called promises but I don't really get how I can use them here.

function msgAfterTimeout (who, timeout, onDone) {
    setTimeout(function () {
        onDone(" Hello " + who + "!");
    }, timeout);
}
var test="";
var list = [{name:"foo",surname:"bar"},{name:"Jean",surname:"dupond"}];

function dispName(cb)
{
    list.forEach(function(item, index)
    {
        msgAfterTimeout(item.name, 200, function (msg) 
        {
            test=msg+"\n";

        });
        cb(result);

    });

}

dispName(function(data){
    console.log(data);
});

Answer 1

function msgAfterTimeout (who, timeout, onDone) {
    setTimeout(function () {
        onDone(" Hello " + who + "!");
    }, timeout);
}

var test= "";
var list = [{name:"foo",surname:"bar"},{name:"Jean",surname:"dupond"}];

function newFunc(list, i, endCb) {
     var name = list[i].name;
     msgAfterTimeout(name, 200, function(msg) {
          var test = msg + "\n";
          console.log(test);
          if(i+1 == list.length) {
              endCb();
          }
          else {
             newFunc(list, i+1, endCb);
          }
     });
}

function dispName(cb)
{
      newFunc(list, 0 , cb);    
}

dispName(function(){
    console.log("Done with all!");
});

This outputs:

Hello foo! Hello Jean! Done with all!

Answer 2

Here's your example with Promises:

 var list = [{name: "foo", surname: "bar"}, {name: "Jean", surname: "dupond"}]; function msgAfterTimeout(who, timeout) { return new Promise(resolve => setTimeout( () => resolve(" Hello " + who + "!"), timeout) ); } Promise.all( list.map(item => msgAfterTimeout(item.name, 200)) ).then( result => console.log(result.join('\\n')) ); 

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 3

forEach processes things in series , so for the sake of this answer, let's assume that's a requirement. Promise.all as demonstrated by @georg will process the items in parallel – it's a good answer but it won't help you if a series is what you actually need.

The Array.prototype methods reduce , map , and forEach are synchronous, but you could easily make an asynchronous variants. You're using forEach here but you're actually performing a reduce by hand. So we'll start by implementing an asynchronous reducek and then go from there

Don't worry too much about understanding reducek itself. All you need to know is the primary difference between reducek and reduce is that the reducing function receives an extra callback argument that is called when each item is done, and reducek has its own callback for when the entire input list is done.

 function reducek (f, acc, [x, ...xs], k) { if (x === undefined) return k (acc) else return f (acc, x, y => reducek (f, y, xs, k)) } function msgAfterTimeout (who, timeout, onDone) { return setTimeout(onDone, timeout, "Hello " + who + "!") } function messageReducer (acc, item, done) { return msgAfterTimeout(item.name, 200, function (text) { return done([...acc, text]) }) } function displayName (list, done) { // use our async reduce here return reducek (messageReducer, [], list, done) } var list = [{name:"foo",surname:"bar"},{name:"Jean",surname:"dupond"}] displayName (list, function (texts) { console.log("Done!", texts.join(' ')) }) // Done! Hello foo! Hello Jean! 

Important things to notice ...

1. No longer performing reduce by hand – instead of using a test variable initialized with state of '' (empty string), reducek accepts the initial value as an argument.

2. Here we're using an initial state of of [] (empty array) to store each of the texts. When we're done, we join the texts together using texts.join(' ') .

---

Not Another Ceremony ...

All of that is a lot of ceremony and continuations are not necessarily the best for asynchronous flow control. In fact, Promises were brought to JavaScript because a better tool was needed.

// instead of returning a timeout, return a Promise
function msgAfterTimeout (who, timeout) {
  return new Promise(function (resolve) {
    setTimeout(resolve, timeout, "Hello " + who + "!")
  })
}

// new async/await syntax - work with Promises in a most elegant fashion
// no more callback parameter; async implicitly returns a Promise
 function displayName (list) {
  let texts = []
  for (let item of list)
    texts.push( msgAfterTimeout(item.name, 200))
  return texts
}

var list = [{name:"foo",surname:"bar"},{name:"Jean",surname:"dupond"}]

// instead of a callback, chain a .then on the returned Promise
displayName(list).then(texts => console.log("Done!", texts.join(' ')))

// Done! Hello foo! Hello Jean!

Note: If you need to support older browsers, async / await needs to be transpiled using something like Babel.