Question

我已经看过很多这样的主题，有些主题几乎完全相同，但我仍然没有找到解决方案。

我基本上有一个HTML表，它从10个不同的来源获取数据。我尝试推送数组并为总和提供资金的9个来源，这将是表格中的一列。另一个来源只是一个外部查询结果。

当他们花费太长时间加载并且表已经填充时，我遇到了问题。

我尝试了一个超时功能但它似乎并没有起作用。即使我添加一个变量= 0，然后为每个源执行source1 + = variable，我也会遇到表中显示10个逗号分隔值而不是总和的问题。

到目前为止我所拥有的内容，我在代码中的一些letterers只是随机的和占位符来显示结构。但这是基本设置。我只在9个功能中包含2个以节省空间，但它与前两个，3..4..5等非常相似。

在这里不知所措，任何帮助都会很棒，我感谢你们宝贵的时间。

 /* HTML */

<table id="AA"> <caption>title<span id="totalValue">0</span></caption>
<tr>
<th>L</th>
<th>L Qty.</th>
<th>W</th>
<th class="value">Value</th>
<th>some text</th>
<label for="CD">
    </label>
    <input id="img" type="hidden" value="somedatahere" size="60" />
   </tr>
</table>

//and heres the separate js 
var sumqholder = 0;

$('#Form').submit(function(event) {
   event.preventDefault();

   $('#results').html('loading...');

   var AB = $('#CD').val();

   A.H.call(function(err, J) {
  A.I.call(function(err, K) {

   var EF = $('#EF').val();


   A.G.call(EF, function(err, G) {
    var results = '<b>--:</b> ';
    results += G.round(5);
    sumq += G;
    $('#results').html(results);

   });
  });

  $('#results2').html('loading...');

  var AB = $('#CD').val();

  A.H.call(function(err, J) {

     A.I.call(function(err, K) {

      var EF = $('#EF').val();


      A.G.call(IA, function(err, G) {
       var results2 = '<b>--:</b> ';
       results2 += G.round(5);
       sumq += G;
       $('#results2').html(results2);

      });
     });

     var sumq = sumqholder;
     var L = [{
      M: O,
      quantity: sumq
     }, {
      P: " ",
      quantity: x
     }];
     var totalValue = 0;
     $(document).ready(function() {
      refresh();
     });

     function refresh() {
      $("#AA").find("tr:gt(0)").remove();
      totalValue = 0;
      L.forEach(function(L) {
       sendRequest(L.M, L.quantity);
      });
     }

     function sendRequest(M, L) {
      var url = " " + M + "/";
      $.get(url, function(data) {
       addRow(data[0], quantity);
      });
     }

     function addRow(data, quantity) {
      var value = data.W * quantity;
      totalValue += value;
      var row = '<tr>';
      row += '<td>' + data.I + '</td>';
      row += '<td>' + quantity + '</td>';
      row += '<td>' + data.I + '</td>';
      row += '<td>' + value.toFixed(2) + '</td>';
      row += '<td>' + data.O + '</td>';
      row += '</tr>';
      $('#AA tr:last').after(row);
      updateTotalValue();
     }

     function updateTotalValue() {
      $("#totalValue").text(totalValue.toFixed(6));
     }

Answer 1

如果我做对了，你在处理数据方面遇到了问题，因为来源是来自10个不同的异步调用吗？如果是这种情况，请通过调用检查功能完成每个呼叫。

var flag = 0;

function checkLoaded()
{
    if(flag == 9){
        doDataProcessing();
    }else{
        flag++;
    }
}

这样，每次调用都将结束调用checkLoaded（）;如果它是第10个，则flag将增加9次，因此我们已经可以假设我们可以进行数据处理。

Answer 2

这正是承诺旨在简化的场景。它们将帮助您避免“回调地狱”并管理错误。

首先，参考How do I Convert an Existing Callback API to Promises?，宣传所有接受回调的方法：

A.G.callAsync = function(val) {
    return new Promise(function(resolve, reject) {
        A.G.call(val, function(err, x) {
            err ? reject(err) : resolve(x);
        });
    });
};
A.H.callAsync = function() {
    return new Promise(function(resolve, reject) {
        A.H.call(function(err, x) {
            err ? reject(err) : resolve(x);
        });
    });
};
A.I.callAsync = function() {
    return new Promise(function(resolve, reject) {
        A.I.call(function(err, x) {
            err ? reject(err) : resolve(x);
        });
    });
};

jQuery的$.get()已经返回一个承诺，因此不需要被宣传。

然后，其他所有内容都可以在$(document).ready(function() {...})结构中完成，如下所示：

$(document).ready(function() {
    $('#Form').submit(function (event) {
        event.preventDefault();

        $('#results').html('loading...');
        // promise chain for the first A.H(), A.I(), A,G() sequence.
        var promise1 = A.H.callAsync().then(function(J) {
            return A.I.callAsync();
        }).then(function(K) {
            return A.G.callAsync($('#AB').val());
        }).then(function(G) {
            $('#results').html('<b>--:</b> ' + G.round(5));
            return G; // the chain delivers this value
        });

        // promise chain for the second A.H(), A.I(), A,G() sequence.
        var promise2 = promise1.then(function() {
            $('#results2').html('loading...');
            return A.H.callAsync().then(function(J) {
                return A.I.callAsync();
            }).then(function(K) {
                return A.G.callAsync($('#EF').val());
            }).then(function(G) {
                $('#results2').html('<b>--:</b> ' + G.round(5));
                return G; // the chain delivers this value
            });
        });

        Promise.all([promise1, promise2]) // aggregate promise1 and promise2
        .then(function(G_values) { // G_values is an array containing the `G` values delivered by promise1 and promise2.
            var sumq = G_values.reduce(function(runningTotal, val) {
                return runningTotal + val;
            }, 0);
            var L = [
                { 'M': O, 'quantity': sumq }, // what is O?
                { 'P': ' ', 'quantity': x } // where's 'M'? what is 'x'
                // ...
            ];
            $("#AA").find("tr:gt(0)").remove();
            return Promise.all(L.map(sendRequest)) // aggregate all the promises returned by sendRequest()
            .then(function(values) { // `values` is an array of values delivered by the promises returned from sendRequest().
                var totalValue = values.reduce(function(runningTotal, val) {
                    return runningTotal + val;
                }, 0); // ie values[0] + values[1] + ...
                $("#totalValue").text(totalValue.toFixed(6));
            });

            function sendRequest(item) {
                var url = ' ' + item.M + '/';
                var $tr = $('<tr/>').insertAfter('#AA tr:last'); // inserting here ensures the <tr>s are in the same order as the objects in `L`.
                return $.get(url)
                .then(function(data) {
                    return addRow(data[0], item.quantity, $tr); // deliver addRow's return value to Promise.all() above
                });
            }
            function addRow(data, quantity, $tr) {
                var value = data.W * quantity;
                var cells = '<td>' + data.I + '</td>'
                + '<td>' + quantity + '</td>'
                + '<td>' + data.I + '</td>'
                + '<td>' + value.toFixed(2) + '</td>'
                + '<td>' + data.O + '</td>';
                $tr.html(cells);
                return value; // for on-screen consistency, you may choose to `return Number(value.toFixed(2))`
            }
        }).catch(function(err) {
            console.error(err);
        });
    });
});

我不确定100％是你想要的，但它应该会让你知道如何解决异步javascript问题。

填充html表，慢慢加载单独的jquery功能

2 个答案: