ฉันจะรอชุดฟังก์ชันการโทรกลับแบบอะซิงโครนัสได้อย่างไร

ฉันมีรหัสที่มีลักษณะเช่นนี้ใน javascript:

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

หลังจากการเรียก async ทั้งหมดเสร็จสิ้นฉันต้องการคำนวณค่าต่ำสุดของอาร์เรย์ทั้งหมด

ฉันจะรอพวกเขาทั้งหมดได้อย่างไร?

ความคิดเดียวของฉันตอนนี้คือการมีอาร์เรย์ของบูลีนที่เรียกว่า done และตั้งค่า done [i] เป็น true ในฟังก์ชัน callback ith แล้วพูดว่า while (ยังไม่เสร็จทั้งหมด) {}

แก้ไข: ฉันคิดว่าวิธีแก้ปัญหาที่เป็นไปได้ แต่น่าเกลียดวิธีหนึ่งคือการแก้ไขอาร์เรย์ที่ทำเสร็จแล้วในการโทรกลับแต่ละครั้งจากนั้นเรียกใช้เมธอดหากมีการตั้งค่าอื่น ๆ ทั้งหมดจากการโทรกลับแต่ละครั้งดังนั้นการโทรกลับครั้งสุดท้ายที่จะเสร็จสมบูรณ์จะเรียกใช้วิธีการต่อเนื่อง

ขอบคุณล่วงหน้า.

คุณไม่ได้เจาะจงรหัสของคุณมากนักดังนั้นฉันจะสร้างสถานการณ์ สมมติว่าคุณมีการโทรของ ajax 10 ครั้งและคุณต้องการสะสมผลลัพธ์จากการโทรของ ajax 10 ครั้งจากนั้นเมื่อพวกเขาดำเนินการเสร็จสิ้นคุณก็ต้องการทำอะไรบางอย่าง คุณสามารถทำได้โดยการสะสมข้อมูลในอาร์เรย์และติดตามว่าข้อมูลสุดท้ายเสร็จสิ้นเมื่อใด:

เคาน์เตอร์คู่มือ

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
        }
    });
}

หมายเหตุ: การจัดการข้อผิดพลาดมีความสำคัญที่นี่ (ไม่แสดงเนื่องจากเป็นเรื่องเฉพาะสำหรับวิธีการโทรของคุณโดยใช้ ajax) คุณจะต้องคิดว่าคุณจะจัดการกับกรณีนี้อย่างไรเมื่อการโทรของ ajax ไม่สำเร็จไม่ว่าจะด้วยข้อผิดพลาดหรือติดขัดเป็นเวลานานหรือหมดเวลาหลังจากผ่านไปนาน

jQuery สัญญา

เพิ่มคำตอบของฉันในปี 2014 ทุกวันนี้คำสัญญามักใช้ในการแก้ปัญหาประเภทนี้เนื่องจาก jQuery $.ajax()ส่งคืนคำสัญญาไปแล้วและ$.when()จะแจ้งให้คุณทราบเมื่อกลุ่มของคำสัญญาได้รับการแก้ไขทั้งหมดและจะรวบรวมผลตอบแทนให้คุณ:

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
});

สัญญามาตรฐาน ES6

ตามที่ระบุไว้ในคำตอบของ kba : หากคุณมีสภาพแวดล้อมที่มีสัญญาดั้งเดิมในตัว (เบราว์เซอร์สมัยใหม่หรือ node.js หรือใช้ babeljs Transpile หรือใช้ polyfill คำสัญญา) คุณสามารถใช้สัญญาที่ระบุ ES6 ได้ ดูตารางนี้สำหรับการรองรับเบราว์เซอร์ สัญญาได้รับการสนับสนุนในเบราว์เซอร์ปัจจุบันเกือบทั้งหมดยกเว้น IE

หากdoAjax()คืนคำสัญญาคุณสามารถทำได้:

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
});

หากคุณจำเป็นต้องทำการดำเนินการ async ที่ไม่ใช่สัญญาให้เป็นแบบที่ส่งคืนสัญญาคุณสามารถ "ให้คำมั่นสัญญา" ได้ดังนี้:

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

จากนั้นใช้รูปแบบด้านบน:

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
});

บลูเบิร์ดสัญญา

หากคุณใช้ไลบรารีที่มีคุณลักษณะมากมายเช่นไลบรารีBluebird Promiseจะมีฟังก์ชันเพิ่มเติมบางอย่างในตัวเพื่อให้ง่ายขึ้น:

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

เช็คอินตั้งแต่ปี 2015: ตอนนี้เรามีคำสัญญาดั้งเดิมในเบราว์เซอร์ล่าสุด (Edge 12, Firefox 40, Chrome 43, Safari 8, Opera 32 และเบราว์เซอร์ Android 4.4.4 และ iOS Safari 8.4 แต่ไม่ใช่ Internet Explorer, Opera Mini และเวอร์ชันเก่ากว่า ของ Android)

หากเราต้องการดำเนินการ 10 async และรับการแจ้งเตือนเมื่อการดำเนินการทั้งหมดเสร็จสิ้นเราสามารถใช้เนทีPromise.allฟได้โดยไม่ต้องมีไลบรารีภายนอก:

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);
});

คุณสามารถใช้ออบเจ็กต์Deferredของ jQuery ร่วมกับเมธอดเมื่อ

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
});

คุณสามารถเลียนแบบได้ดังนี้:

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

จากนั้นการเรียก async แต่ละครั้งจะทำสิ่งนี้:

countDownLatch.count++;

ในขณะที่ในการเรียก asynch แต่ละครั้งเมื่อสิ้นสุดวิธีการที่คุณเพิ่มบรรทัดนี้:

countDownLatch.check();

กล่าวอีกนัยหนึ่งคือคุณเลียนแบบฟังก์ชันการนับถอยหลังสลัก

นี่เป็นวิธีที่เรียบร้อยที่สุดในความคิดของฉัน

สัญญาทั้งหมด

FetchAPI

(ด้วยเหตุผลบางประการ Array.map ใช้ไม่ได้ภายในฟังก์ชันนั้นสำหรับฉัน แต่คุณสามารถใช้ a .forEach และ [] .concat () หรือสิ่งที่คล้ายกัน)

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);
})

ใช้ไลบรารีโฟลว์ควบคุมเช่น 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)
})