Lulus dalam array Ditangguhkan ke $ .when ()

Berikut adalah contoh yang dibuat-buat tentang apa yang terjadi: http://jsfiddle.net/adamjford/YNGcm/20/

HTML:

<a href="#">Click me!</a>
<div></div>

JavaScript:

function getSomeDeferredStuff() {
    var deferreds = [];

    var i = 1;
    for (i = 1; i <= 10; i++) {
        var count = i;

        deferreds.push(
        $.post('/echo/html/', {
            html: "<p>Task #" + count + " complete.",
            delay: count
        }).success(function(data) {
            $("div").append(data);
        }));
    }

    return deferreds;
}

$(function() {
    $("a").click(function() {
        var deferreds = getSomeDeferredStuff();

        $.when(deferreds).done(function() {
            $("div").append("<p>All done!</p>");
        });
    });
});

Saya ingin "Semua selesai!" muncul setelah semua tugas yang ditangguhkan selesai, tetapi $.when()tampaknya tidak tahu bagaimana menangani array objek yang Ditangguhkan. "Semua selesai!" terjadi pertama kali karena array bukan objek yang ditangguhkan, jadi jQuery berjalan di depan dan menganggap itu baru saja selesai.

Saya tahu orang bisa meneruskan objek ke fungsi seperti $.when(deferred1, deferred2, ..., deferredX)tetapi tidak diketahui berapa banyak objek yang ditangguhkan akan ada di eksekusi dalam masalah aktual yang saya coba selesaikan.

Untuk meneruskan array nilai ke fungsi apa pun yang biasanya mengharapkannya sebagai parameter yang terpisah, gunakan Function.prototype.apply, jadi dalam hal ini Anda perlu:

$.when.apply($, my_array).then( ___ );

Lihat http://jsfiddle.net/YNGcm/21/

Di ES6, Anda bisa menggunakan ... operator spread sebagai gantinya:

$.when(...my_array).then( ___ );

Dalam kedua kasus tersebut, karena tidak mungkin Anda akan tahu sebelumnya berapa banyak parameter formal yang diperlukan .thenpawang, pawang itu perlu memproses argumentsarray untuk mengambil hasil dari setiap janji.

Penanganan masalah di atas (terima kasih!) Tidak dengan benar mengatasi masalah mendapatkan kembali objek yang disediakan untuk metode yang ditangguhkan resolve()karena jQuery memanggil done()dan memanggil kembali fail()dengan parameter individual, bukan array. Itu berarti kita harus menggunakan argumentspseudo-array untuk mendapatkan semua objek yang diselesaikan / ditolak dikembalikan oleh array yang ditangguhkan, yang jelek:

$.when.apply($,deferreds).then(function() {
     var objects=arguments; // The array of resolved objects as a pseudo-array
     ...
};

Karena kami meneruskan dalam array yang ditangguhkan, alangkah baiknya untuk mendapatkan kembali array hasil. Akan lebih baik untuk mendapatkan kembali array aktual alih-alih pseudo-array sehingga kita dapat menggunakan metode seperti Array.sort().

Berikut ini adalah solusi terinspirasi oleh when.js 's when.all()metode yang alamat masalah ini:

// Put somewhere in your scripting environment
if (typeof jQuery.when.all === 'undefined') {
    jQuery.when.all = function (deferreds) {
        return $.Deferred(function (def) {
            $.when.apply(jQuery, deferreds).then(
                function () {
                    def.resolveWith(this, [Array.prototype.slice.call(arguments)]);
                },
                function () {
                    def.rejectWith(this, [Array.prototype.slice.call(arguments)]);
                });
        });
    }
}

Sekarang Anda dapat dengan mudah memasukkan array dari ditangguhkan / janji dan mendapatkan kembali array objek yang diselesaikan / ditolak dalam panggilan balik Anda, seperti:

$.when.all(deferreds).then(function(objects) {
    console.log("Resolved objects:", objects);
});

Anda dapat menerapkan whenmetode ini ke array Anda:

var arr = [ /* Deferred objects */ ];

$.when.apply($, arr);

Bagaimana Anda bekerja dengan array jQuery Deferreds?

Saat memanggil beberapa panggilan AJAX paralel, Anda memiliki dua opsi untuk menangani masing-masing respons.

1. Gunakan panggilan AJAX Sinkron / satu demi satu / tidak disarankan
2. Gunakan Promises'larik dan $.whenyang menerima promises dan panggilan .donebaliknya dipanggil ketika semua promises berhasil dikembalikan dengan tanggapan masing-masing.

Contoh

function ajaxRequest(capitalCity) {
   return $.ajax({
        url: 'https://restcountries.eu/rest/v1/capital/'+capitalCity,
        success: function(response) {
        },
        error: function(response) {
          console.log("Error")
        }
    });
}
$(function(){
   var capitalCities = ['Delhi', 'Beijing', 'Washington', 'Tokyo', 'London'];
   $('#capitals').text(capitalCities);

   function getCountryCapitals(){ //do multiple parallel ajax requests
      var promises = [];   
      for(var i=0,l=capitalCities.length; i<l; i++){
            var promise = ajaxRequest(capitalCities[i]);
            promises.push(promise);
      }
  
      $.when.apply($, promises)
        .done(fillCountryCapitals);
   }
  
   function fillCountryCapitals(){
        var countries = [];
        var responses = arguments;
        for(i in responses){
            console.dir(responses[i]);
            countries.push(responses[i][0][0].nativeName)
        }  
        $('#countries').text(countries);
   }
  
   getCountryCapitals()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h4>Capital Cities : </h4> <span id="capitals"></span>
  <h4>Respective Country's Native Names : </h4> <span id="countries"></span>
</div>

Sebagai alternatif sederhana, yang tidak memerlukan $.when.applyatau array, Anda dapat menggunakan pola berikut untuk menghasilkan janji tunggal untuk banyak janji paralel:

promise = $.when(promise, anotherPromise);

misalnya

function GetSomeDeferredStuff() {
    // Start with an empty resolved promise (or undefined does the same!)
    var promise;
    var i = 1;
    for (i = 1; i <= 5; i++) {
        var count = i;

        promise = $.when(promise,
        $.ajax({
            type: "POST",
            url: '/echo/html/',
            data: {
                html: "<p>Task #" + count + " complete.",
                delay: count / 2
            },
            success: function (data) {
                $("div").append(data);
            }
        }));
    }
    return promise;
}

$(function () {
    $("a").click(function () {
        var promise = GetSomeDeferredStuff();
        promise.then(function () {
            $("div").append("<p>All done!</p>");
        });
    });
});

Catatan:

• Saya menemukan yang ini setelah melihat rantai seseorang menjanjikan secara berurutan, menggunakan promise = promise.then(newpromise)
• Kelemahannya adalah ia menciptakan objek janji ekstra di belakang layar dan parameter apa pun yang diberikan pada akhirnya tidak terlalu berguna (karena mereka bersarang di dalam objek tambahan). Untuk apa yang Anda inginkan, meskipun pendek dan sederhana.
• Sisi baiknya adalah tidak memerlukan manajemen array atau array.

Saya ingin mengusulkan yang lain dengan menggunakan $ .each:

1. Kami dapat mendeklarasikan fungsi ajax seperti:

   function ajaxFn(someData) {
       this.someData = someData;
       var that = this;
       return function () {
           var promise = $.Deferred();
           $.ajax({
               method: "POST",
               url: "url",
               data: that.someData,
               success: function(data) {
                   promise.resolve(data);
               },
               error: function(data) {
                   promise.reject(data);
               }
           })
           return promise;
       }
   }

2. Bagian dari kode tempat kami membuat berbagai fungsi dengan ajax untuk dikirim:

   var arrayOfFn = [];
   for (var i = 0; i < someDataArray.length; i++) {
       var ajaxFnForArray = new ajaxFn(someDataArray[i]);
       arrayOfFn.push(ajaxFnForArray);
   }

3. Dan memanggil fungsi dengan mengirim ajax:

   $.when(
       $.each(arrayOfFn, function(index, value) {
           value.call()
       })
   ).then(function() {
           alert("Cheer!");
       }
   )

Jika Anda mentransisikan dan memiliki akses ke ES6, Anda dapat menggunakan sintaksis spread yang secara khusus menerapkan setiap item yang dapat diulang dari suatu objek sebagai argumen diskrit, seperti yang $.when()dibutuhkannya.

$.when(...deferreds).done(() => {
    // do stuff
});

MDN Link - Sebarkan Sintaks

Jika Anda menggunakan angularJS atau varian pustaka janji Q, maka Anda memiliki .all()metode yang memecahkan masalah ini.

var savePromises = [];
angular.forEach(models, function(model){
  savePromises.push(
    model.saveToServer()
  )
});

$q.all(savePromises).then(
  function success(results){...},
  function failed(results){...}
);

lihat API lengkap:

https://github.com/kriskowal/q/wiki/API-Reference#promiseall

https://docs.angularjs.org/api/ng/service/$q

Saya memiliki kasus yang sangat mirip di mana saya memposting di setiap loop dan kemudian mengatur markup html di beberapa bidang dari nomor yang diterima dari ajax. Saya kemudian perlu melakukan penjumlahan dari nilai-nilai (sekarang diperbarui) dari bidang-bidang ini dan tempatkan di bidang total.

Jadi masalahnya adalah saya mencoba melakukan penjumlahan pada semua nomor tetapi belum ada data yang kembali dari panggilan ajax async. Saya perlu menyelesaikan fungsi ini dalam beberapa fungsi untuk dapat menggunakan kembali kode. Fungsi luar saya menunggu data sebelum saya pergi dan melakukan beberapa hal dengan DOM yang sepenuhnya diperbarui.

    // 1st
    function Outer() {
        var deferreds = GetAllData();

        $.when.apply($, deferreds).done(function () {
            // now you can do whatever you want with the updated page
        });
    }

    // 2nd
    function GetAllData() {
        var deferreds = [];
        $('.calculatedField').each(function (data) {
            deferreds.push(GetIndividualData($(this)));
        });
        return deferreds;
    }

    // 3rd
    function GetIndividualData(item) {
        var def = new $.Deferred();
        $.post('@Url.Action("GetData")', function (data) {
            item.html(data.valueFromAjax);
            def.resolve(data);
        });
        return def;
    }