Bagaimana saya bisa menunggu sekumpulan fungsi panggilan balik asinkron?

Saya memiliki kode yang terlihat seperti ini di javascript:

forloop {
    //async call, returns an array to its callback
}

Setelah SEMUA panggilan asinkron selesai, saya ingin menghitung min di atas semua array.

Bagaimana saya bisa menunggu semuanya?

Satu-satunya ide saya saat ini adalah memiliki larik boolean yang disebut selesai, dan menyetel selesai [i] menjadi true dalam fungsi panggilan balik ke-i, lalu mengatakan while (tidak semua selesai) {}

edit: Saya kira satu solusi yang mungkin, tetapi jelek, adalah mengedit array done di setiap callback, lalu memanggil metode jika semua selesai lainnya disetel dari setiap callback, sehingga callback terakhir yang diselesaikan akan memanggil metode berkelanjutan.

Terima kasih sebelumnya.

Anda belum terlalu spesifik dengan kode Anda, jadi saya akan membuat skenario. Katakanlah Anda memiliki 10 panggilan ajax dan Anda ingin mengumpulkan hasil dari 10 panggilan ajax tersebut dan kemudian ketika semuanya telah selesai Anda ingin melakukan sesuatu. Anda dapat melakukannya seperti ini dengan mengumpulkan data dalam array dan melacak kapan yang terakhir selesai:

Penghitung Manual

var ajaxCallsRemaining = 10;
var returnedData = [];

for (var i = 0; i < 10; i++) {
    doAjax(whatever, function(response) {
        // success handler from the ajax call

        // save response
        returnedData.push(response);

        // see if we're done with the last ajax call
        --ajaxCallsRemaining;
        if (ajaxCallsRemaining <= 0) {
            // all data is here now
            // look through the returnedData and do whatever processing 
            // you want on it right here
        }
    });
}

Catatan: penanganan error penting di sini (tidak ditampilkan karena ini khusus untuk cara Anda melakukan panggilan ajax). Anda akan ingin memikirkan bagaimana Anda akan menangani kasus ketika satu panggilan ajax tidak pernah selesai, baik dengan kesalahan atau macet untuk waktu yang lama atau waktu habis setelah waktu yang lama.

jQuery Janji

Menambah jawaban saya pada tahun 2014. Akhir-akhir ini, $.ajax()promise sering digunakan untuk menyelesaikan masalah jenis ini karena jQuery sudah mengembalikan sebuah promise dan $.when()akan memberi tahu Anda saat sekelompok promise telah diselesaikan dan akan mengumpulkan hasil yang dikembalikan untuk Anda:

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push($.ajax(...));
}
$.when.apply($, promises).then(function() {
    // returned data is in arguments[0][0], arguments[1][0], ... arguments[9][0]
    // you can process it here
}, function() {
    // error occurred
});

Janji Standar ES6

Seperti yang ditentukan dalam jawaban kba : jika Anda memiliki lingkungan dengan promise bawaan (browser modern atau node.js atau menggunakan babeljs transpile atau menggunakan promise polyfill), Anda dapat menggunakan promise yang ditentukan ES6. Lihat tabel ini untuk dukungan browser. Janji didukung di hampir semua browser saat ini, kecuali IE.

Jika doAjax()mengembalikan sebuah promise, Anda dapat melakukan ini:

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push(doAjax(...));
}
Promise.all(promises).then(function() {
    // returned data is in arguments[0], arguments[1], ... arguments[n]
    // you can process it here
}, function(err) {
    // error occurred
});

Jika Anda perlu membuat operasi asinkron non-promise menjadi operasi yang mengembalikan promise, Anda bisa "menjanjikan" seperti ini:

function doAjax(...) {
    return new Promise(function(resolve, reject) {
        someAsyncOperation(..., function(err, result) {
            if (err) return reject(err);
            resolve(result);
        });
    });
}

Dan, kemudian gunakan pola di atas:

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push(doAjax(...));
}
Promise.all(promises).then(function() {
    // returned data is in arguments[0], arguments[1], ... arguments[n]
    // you can process it here
}, function(err) {
    // error occurred
});

Janji Bluebird

Jika Anda menggunakan pustaka yang lebih kaya fitur seperti pustaka janji Bluebird , maka itu memiliki beberapa fungsi tambahan bawaan untuk membuatnya lebih mudah:

 var doAjax = Promise.promisify(someAsync);
 var someData = [...]
 Promise.map(someData, doAjax).then(function(results) {
     // all ajax results here
 }, function(err) {
     // some error here
 });

Memeriksa dari 2015: Kami sekarang memiliki janji asli di browser terbaru (Edge 12, Firefox 40, Chrome 43, Safari 8, Opera 32 dan browser Android 4.4.4 dan iOS Safari 8.4, tetapi tidak Internet Explorer, Opera Mini, dan versi yang lebih lama Android).

Jika kita ingin melakukan 10 tindakan asinkron dan mendapatkan pemberitahuan ketika semuanya sudah selesai, kita dapat menggunakan yang asli Promise.all, tanpa pustaka eksternal:

function asyncAction(i) {
    return new Promise(function(resolve, reject) {
        var result = calculateResult();
        if (result.hasError()) {
            return reject(result.error);
        }
        return resolve(result);
    });
}

var promises = [];
for (var i=0; i < 10; i++) {
    promises.push(asyncAction(i));
}

Promise.all(promises).then(function AcceptHandler(results) {
    handleResults(results),
}, function ErrorHandler(error) {
    handleError(error);
});

Anda bisa menggunakan objek Deferred jQuery bersama dengan metode when .

deferredArray = [];
forloop {
    deferred = new $.Deferred();
    ajaxCall(function() {
      deferred.resolve();
    }
    deferredArray.push(deferred);
}

$.when(deferredArray, function() {
  //this code is called after all the ajax calls are done
});

Anda dapat menirunya seperti ini:

  countDownLatch = {
     count: 0,
     check: function() {
         this.count--;
         if (this.count == 0) this.calculate();
     },
     calculate: function() {...}
  };

maka setiap panggilan asinkron melakukan ini:

countDownLatch.count++;

sementara di setiap panggilan asinkron kembali di akhir metode Anda menambahkan baris ini:

countDownLatch.check();

Dengan kata lain, Anda meniru fungsi hitung-mundur-latch.

Ini cara yang paling rapi menurut saya.

Promise.all

FetchAPI

(untuk beberapa alasan Array.map tidak berfungsi di dalam. lalu fungsi untuk saya. Tetapi Anda dapat menggunakan .forEach dan [] .concat () atau yang serupa)

Promise.all([
  fetch('/user/4'),
  fetch('/user/5'),
  fetch('/user/6'),
  fetch('/user/7'),
  fetch('/user/8')
]).then(responses => {
  return responses.map(response => {response.json()})
}).then((values) => {
  console.log(values);
})

Gunakan pustaka aliran kontrol seperti after

after.map(array, function (value, done) {
    // do something async
    setTimeout(function () {
        // do something with the value
        done(null, value * 2)
    }, 10)
}, function (err, mappedArray) {
    // all done, continue here
    console.log(mappedArray)
})