web-dev-qa-db-ja.com

非同期のforEachコールバックがすべて完了した後のコールバック

タイトルが示すように。どうやってこれをするの？

ForEach-loopが各要素を通過して非同期処理を行った後にwhenAllDone()を呼び出したいです。

[1, 2, 3].forEach(
  function(item, index, array, done) {
     asyncFunction(item, function itemDone() {
       console.log(item + " done");
       done();
     });
  }, function allDone() {
     console.log("All done");
     whenAllDone();
  }
);

このように動作させることは可能ですか？ forEachの2番目の引数が、すべての反復を経た後に実行されるコールバック関数の場合

期待される出力：

3 done
1 done
2 done
All done!
javascriptnode.jsasynchronouscallback
201
Dan Andreasson

Array.forEachはこの巧妙さを提供しません（もしそうならそうです）が、あなたが望むものを達成するためのいくつかの方法があります：

簡単なカウンターを使う

function callback () { console.log('all done'); }

var itemsProcessed = 0;

[1, 2, 3].forEach((item, index, array) => {
  asyncFunction(item, () => {
    itemsProcessed++;
    if(itemsProcessed === array.length) {
      callback();
    }
  });
});

（@vanuan他に感謝します）このアプローチは、 "done"コールバックを呼び出す前に全てのアイテムが処理されることを保証します。コールバックで更新されるカウンターを使う必要があります。非同期操作の戻りの順序は保証されていないため、indexパラメーターの値に応じて同じ保証は提供されません。

ES6の約束を使用する

（promiseライブラリは古いブラウザにも使用できます）。

  1. 同期実行を保証するすべての要求を処理します（1、2、3など）。

    function asyncFunction (item, cb) {
  setTimeout(() => {
    console.log('done with', item);
    cb();
  }, 100);
}

let requests = [1, 2, 3].reduce((promiseChain, item) => {
    return promiseChain.then(() => new Promise((resolve) => {
      asyncFunction(item, resolve);
    }));
}, Promise.resolve());

requests.then(() => console.log('done'))

  2. 「同期」実行せずにすべての非同期要求を処理します（2は1より早く終了する場合があります）。

    let requests = [1,2,3].map((item) => {
    return new Promise((resolve) => {
      asyncFunction(item, resolve);
    });
})

Promise.all(requests).then(() => console.log('done'));

非同期ライブラリを使用する

他にも非同期ライブラリがあり、 async が最も人気があり、欲しいものを表現するためのメカニズムを提供します。

質問の本文は以前同期していた例のコードを削除するために編集されたので、私は明確にするために私の答えを更新しました。元の例では、非同期の振る舞いをモデル化するために同期のようなコードを使用していたので、以下が適用されます。

array.forEachは 同期 でres.writeなので、foreachの呼び出しの後にコールバックを置くことができます。

  posts.foreach(function(v, i) {
    res.write(v + ". index " + i);
  });

  res.end();
337
Nick Tomlin

非同期関数に遭遇し、コードを実行する前にそれがそのタスクを終了することを確認したい場合は、常にコールバック機能を使用できます。

例えば：

var ctr = 0;
posts.forEach(function(element, index, array){
    asynchronous(function(data){
         ctr++; 
         if (ctr === array.length) {
             functionAfterForEach();
         }
    })
});

注：functionAfterForEachは、各タスクが終了した後に実行される関数です。非同期はforeachの内部で実行される非同期関数です。

お役に立てれば。

21
Emil Reña Enriquez

非同期非同期の場合に間違った答えがいくつ出されたかはおかしなことです。インデックスをチェックしても期待通りの動作が得られないことが簡単にわかります。

// INCORRECT
var list = [4000, 2000];
list.forEach(function(l, index) {
    console.log(l + ' started ...');
    setTimeout(function() {
        console.log(index + ': ' + l);
    }, l);
});

出力：

4000 started
2000 started
1: 2000
0: 4000

index === array.length - 1をチェックすると、最初の繰り返しが完了したときにコールバックが呼び出されます。最初の要素はまだ保留中です。

Asyncなどの外部ライブラリを使用せずにこの問題を解決するには、リストの長さを減らして各反復の後に減少することをお勧めします。スレッドが1つしかないので、競合状態になる可能性はないと確信しています。

var list = [4000, 2000];
var counter = list.length;
list.forEach(function(l, index) {
    console.log(l + ' started ...');
    setTimeout(function() {
        console.log(index + ': ' + l);
        counter -= 1;
        if ( counter === 0)
            // call your callback here
    }, l);
});
14
Rsh

これがあなたの問題を解決することを願っています、非同期タスクでforEachを実行する必要があるとき、私は通常これで動作します。

foo = [a,b,c,d];
waiting = foo.length;
foo.forEach(function(entry){
      doAsynchronousFunction(entry,finish) //call finish after each entry
}
function finish(){
      waiting--;
      if (waiting==0) {
          //do your Job intended to be done after forEach is completed
      } 
}

と

function doAsynchronousFunction(entry,callback){
       //asynchronousjob with entry
       callback();
}
10
Adnene Belfodil

ES2018では、非同期イテレータを使用できます。

const asyncFunction = a => fetch(a);
const itemDone = a => console.log(a);

async function example() {
  const arrayOfFetchPromises = [1, 2, 3].map(asyncFunction);

  for await (const item of arrayOfFetchPromises) {
    itemDone(item);
  }

  console.log('All done');
}
5
Krzysztof Grzybek

約束のない私の解決策（これはすべての行動が次の行動が始まる前に終了することを保証する）：

Array.prototype.forEachAsync = function (callback, end) {
        var self = this;
    
        function task(index) {
            var x = self[index];
            if (index >= self.length) {
                end()
            }
            else {
                callback(self[index], index, self, function () {
                    task(index + 1);
                });
            }
        }
    
        task(0);
    };
    
    
    var i = 0;
    var myArray = Array.apply(null, Array(10)).map(function(item) { return i++; });
    console.log(JSON.stringify(myArray));
    myArray.forEachAsync(function(item, index, arr, next){
      setTimeout(function(){
        $(".toto").append("<div>item index " + item + " done</div>");
        console.log("action " + item + " done");
        next();
      }, 300);
    }, function(){
        $(".toto").append("<div>ALL ACTIONS ARE DONE</div>");
        console.log("ALL ACTIONS ARE DONE");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toto">

</div>
2
jackstrapp
 var counter = 0;
 var listArray = [0, 1, 2, 3, 4];
 function callBack() {
     if (listArray.length === counter) {
         console.log('All Done')
     }
 };
 listArray.forEach(function(element){
     console.log(element);
     counter = counter + 1;
     callBack();
 });
1
Hardik Shimpi

これは非同期のNode.jsの解決策です。

async npmパッケージを使う。

（JavaScript）内側のコールバックとforEach Loopの同期

0
Adam Mendoza

私はEasy Wayを使ってそれを解決し、あなたと共有します。

let counter = 0;
            arr.forEach(async (item, index) => {
                await request.query(item, (err, recordset) => {
                    if (err) console.log(err);

                    //do Somthings

                    counter++;
                    if(counter == tableCmd.length){
                        sql.close();
                        callback();
                    }
                });

requestは、ノードjsのmssqlライブラリの機能です。これは各機能または必要なコードを置き換えることができます。がんばろう

0
HamidReza Heydari

私の解決策：

//Object forEachDone

Object.defineProperty(Array.prototype, "forEachDone", {
    enumerable: false,
    value: function(task, cb){
        var counter = 0;
        this.forEach(function(item, index, array){
            task(item, index, array);
            if(array.length === ++counter){
                if(cb) cb();
            }
        });
    }
});


//Array forEachDone

Object.defineProperty(Object.prototype, "forEachDone", {
    enumerable: false,
    value: function(task, cb){
        var obj = this;
        var counter = 0;
        Object.keys(obj).forEach(function(key, index, array){
            task(obj[key], key, obj);
            if(array.length === ++counter){
                if(cb) cb();
            }
        });
    }
});

例：

var arr = ['a', 'b', 'c'];

arr.forEachDone(function(item){
    console.log(item);
}, function(){
   console.log('done');
});

// out: a b c done
0
Gabor
var i=0;
const waitFor = (ms) => 
{ 
  new Promise((r) => 
  {
   setTimeout(function () {
   console.log('timeout completed: ',ms,' : ',i); 
     i++;
     if(i==data.length){
      console.log('Done')  
    }
  }, ms); 
 })
}
var data=[1000, 200, 500];
data.forEach((num) => {
  waitFor(num)
})
0
Nilesh Pawar