Chuyển trong một mảng của Trì hoãn thành $ .when ()

Đây là một ví dụ giả định về những gì đang diễn ra: 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>");
        });
    });
});

Tôi muốn "Tất cả đã hoàn tất!" xuất hiện sau khi tất cả các nhiệm vụ hoãn lại đã hoàn thành, nhưng $.when()dường như không biết cách xử lý một mảng các đối tượng Trì hoãn. "Tất cả đã được làm xong!" đang xảy ra đầu tiên vì mảng không phải là đối tượng Trì hoãn, vì vậy jQuery đi trước và cho rằng nó vừa hoàn thành.

Tôi biết người ta có thể chuyển các đối tượng vào hàm như thế nào $.when(deferred1, deferred2, ..., deferredX)nhưng không biết có bao nhiêu đối tượng Trì hoãn sẽ có lúc thực thi trong vấn đề thực tế mà tôi đang cố gắng giải quyết.

Để truyền một mảng các giá trị cho bất kỳ hàm nào thường mong đợi chúng là các tham số riêng biệt, hãy sử dụng Function.prototype.apply, vì vậy trong trường hợp này bạn cần:

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

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

Trong ES6, bạn có thể sử dụng ... toán tử trải rộng thay thế:

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

Trong cả hai trường hợp, vì không chắc là bạn sẽ biết trước bao nhiêu tham số chính thức mà .thentrình xử lý sẽ yêu cầu, trình xử lý đó sẽ cần xử lý argumentsmảng để lấy kết quả của mỗi lời hứa.

Các cách giải quyết ở trên (cảm ơn!) Không giải quyết đúng vấn đề lấy lại các đối tượng được cung cấp cho người bị trì hoãn resolve() phương thức vì jQuery gọi done()và fail()gọi lại với các tham số riêng lẻ, không phải là một mảng. Điều đó có nghĩa là chúng ta phải sử dụng argumentsmảng giả để có được tất cả các đối tượng được giải quyết / bị từ chối được trả về bởi mảng trả chậm, điều này thật xấu xí:

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

Vì chúng tôi đã thông qua một loạt các hoãn lại, sẽ rất tốt để lấy lại một loạt các kết quả. Nó cũng sẽ là tốt đẹp để lấy lại một mảng thực tế thay vì một mảng giả để chúng ta có thể sử dụng các phương thức như Array.sort().

Dưới đây là một giải pháp lấy cảm hứng từ when.js 's when.all()phương pháp mà địa chỉ những vấn đề này:

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

Bây giờ bạn có thể chỉ cần chuyển vào một loạt các lời hứa / hoãn lại và nhận lại một loạt các đối tượng được giải quyết / bị từ chối trong cuộc gọi lại của bạn, như vậy:

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

Bạn có thể áp dụng whenphương thức cho mảng của mình:

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

$.when.apply($, arr);

Làm thế nào để bạn làm việc với một mảng của Trì hoãn jQuery?

Khi gọi nhiều cuộc gọi AJAX song song, bạn có hai tùy chọn để xử lý các phản hồi tương ứng.

1. Sử dụng cuộc gọi AJAX đồng bộ / cuộc gọi khác / không được đề xuất
2. Sử dụng Promises'mảng và $.whenchấp nhận promises và gọi lại của nó .doneđược gọi khi tất cả các promises được trả về thành công với các phản hồi tương ứng.

Thí dụ

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>

Thay thế đơn giản, không yêu cầu $.when.applyhoặc không array, bạn có thể sử dụng mẫu sau để tạo một lời hứa duy nhất cho nhiều lời hứa song song:

promise = $.when(promise, anotherPromise);

ví dụ

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

Ghi chú:

• Tôi đã tìm ra điều này sau khi thấy ai đó hứa hẹn chuỗi, sử dụng promise = promise.then(newpromise)
• Nhược điểm là nó tạo ra các đối tượng hứa hẹn bổ sung phía sau hậu trường và bất kỳ tham số nào được truyền ở cuối không hữu ích lắm (vì chúng được lồng bên trong các đối tượng bổ sung). Đối với những gì bạn muốn mặc dù nó ngắn và đơn giản.
• Ưu điểm là nó không yêu cầu quản lý mảng hoặc mảng.

Tôi muốn đề xuất một cái khác bằng cách sử dụng $ .each:

1. Chúng tôi có thể khai báo hàm ajax như:

   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. Một phần mã nơi chúng tôi tạo mảng hàm với ajax để gửi:

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

3. Và gọi các chức năng với việc gửi ajax:

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

Nếu bạn đang dịch mã và có quyền truy cập vào ES6, bạn có thể sử dụng cú pháp trải rộng áp dụng cụ thể từng mục có thể lặp lại của một đối tượng như một đối số riêng biệt, chỉ là cách $.when()cần nó.

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

Liên kết MDN - Cú pháp lây lan

Nếu bạn đang sử dụng angularJS hoặc một số biến thể của thư viện Q hứa, thì bạn có một .all()phương pháp giải quyết vấn đề chính xác này.

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

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

xem API đầy đủ:

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

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

Tôi đã có một trường hợp rất giống với việc tôi đã đăng trong mỗi vòng lặp và sau đó thiết lập đánh dấu html trong một số trường từ các số nhận được từ ajax. Sau đó, tôi cần phải thực hiện tổng các giá trị (hiện được cập nhật) của các trường này và đặt trong một trường tổng.

Do đó, vấn đề là tôi đã cố gắng tính tổng tất cả các số nhưng chưa có dữ liệu nào quay trở lại từ các cuộc gọi ajax async. Tôi cần phải hoàn thành chức năng này trong một vài chức năng để có thể sử dụng lại mã. Hàm ngoài của tôi chờ dữ liệu trước khi tôi đi và thực hiện một số nội dung với DOM được cập nhật đầy đủ.

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