$.each() 循环中的 $.getJSON() 调用未按顺序执行

Question

我正在遍历一个 HTML 表并根据从每一行读取的数据执行 $.getJSON() 调用。然后，我想从 $.getJSON 调用中获取数据并将其插入到从中读取变量的行中。

但是，当我运行我的代码时，它似乎执行不同步。所有更改均针对表格的最后一行进行，而不是按顺序进行。

Here's a working jsFiddle with my code

这是我从中读取数据的表：

<table id="isa-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Fund / Stock</th>
            <th>Buy Price (£)</th>
            <th>Amount</th>
            <th>%</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr data-quantity="3.5071" data-symbol="B41XG30" data-type="Fund">
            <td>27 Oct 15</td>
            <td>VANGUARD INV UK LT LIFESTRATEGY 100 PERC EQTY</td>
            <td>142.56914</td>
            <td class="isa-buy-price">£500.00</td>
            <td class="percentage">16%</td>
            <td class="value">123</td>
        </tr>
        <tr data-quantity="329.8154" data-symbol="B6QQ9X9" data-type="Fund">
            <td>14 Dec 15</td>
            <td>BLACKROCK FM LTD JAPAN EQUITY TRACKER D ACC</td>
            <td>1.51597</td>
            <td class="isa-buy-price">£500.00</td>
            <td class="percentage">14</td>
            <td class="value">123</td>
        </tr>
        <tr data-quantity="402.9009" data-symbol="B23FNS4" data-type="Fund">
            <td>11 Jan 16</td>
            <td>THREADNEEDLE INV UK PROP TST INSTL NET ACC</td>
            <td>1.24097</td>
            <td class="isa-buy-price">£500.00</td>
            <td class="percentage">16%</td>
            <td class="value">123</td>
        </tr>
    </tbody>
</table>

这是我的 jQuery，其中构建了 URL 并进行了调用：

$(".isa-buy-price").each(function () {
    $row = $(this);
    var quantity = $(this).parent("tr").data("quantity");
    var symbol = $(this).parent("tr").data("symbol");
    var type = $(this).parent("tr").data("type");

    // Build URL to call YQL
    var url = "";
    if (type == "Fund") {
        url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewFund%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'key-info-lozenge'%5D%2Ftable%2Ftbody%2Ftr%5B2%5D%2Ftd%2Fstrong%2Ftext()%22&format=json&callback=";
    } else {
        url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewShare%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'price'%5D%2Ftbody%2Ftr%2Ftd%5B1%5D%22&format=json&callback=";
    }

    $.getJSON(url, function (json) {
        // Set the variables from the results array
        var result = "";
        if (type == "Fund") {
            result = json.query.results.replace(/\s/g, '');
        } else {
            result = json.query.results.td.content.replace(/\s/g, '');
        }

        success: {
            $row.siblings(".value").text("£" + result);
        }
    });
});

我有点不知从何下手。谁能告诉我为什么请求会这样乱序运行？

Answer 1

您的脚本中的问题不是因为执行顺序，而是因为$row 变量。

您已将其创建为全局变量，因此循环的每次迭代其值都会被覆盖到最新行，因此在循环结束时它将引用最后一行，现在当 ajax 请求完成时他们打电话给$row.siblings(".value").text("£" + result);，它会更新最后一行。

相反，您需要将$row 声明为each() 回调函数的局部变量，以便循环的每次迭代都有自己的变量副本。

$(".isa-buy-price").each(function() {
  var $row = $(this);
  var quantity = $(this).parent("tr").data("quantity");
  var symbol = $(this).parent("tr").data("symbol");
  var type = $(this).parent("tr").data("type");

  // Build URL to call YQL
  var url = "";
  if (type == "Fund") {
    url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewFund%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'key-info-lozenge'%5D%2Ftable%2Ftbody%2Ftr%5B2%5D%2Ftd%2Fstrong%2Ftext()%22&format=json&callback=";
  } else {
    url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewShare%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'price'%5D%2Ftbody%2Ftr%2Ftd%5B1%5D%22&format=json&callback=";
  }

  $.getJSON(url, function(json) {
    // Set the variables from the results array
    var result = "";
    if (type == "Fund") {
      result = json.query.results.replace(/\s/g, '');
    } else {
      result = json.query.results.td.content.replace(/\s/g, '');
    }

    $row.siblings(".value").text("£" + result);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="isa-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Fund / Stock</th>
      <th>Buy Price (£)</th>
      <th>Amount</th>
      <th>%</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr data-quantity="3.5071" data-symbol="B41XG30" data-type="Fund">
      <td>27 Oct 15</td>
      <td>VANGUARD INV UK LT LIFESTRATEGY 100 PERC EQTY</td>
      <td>142.56914</td>
      <td class="isa-buy-price">£500.00</td>
      <td class="percentage">16%</td>
      <td class="value">123</td>
    </tr>
    <tr data-quantity="329.8154" data-symbol="B6QQ9X9" data-type="Fund">
      <td>14 Dec 15</td>
      <td>BLACKROCK FM LTD JAPAN EQUITY TRACKER D ACC</td>
      <td>1.51597</td>
      <td class="isa-buy-price">£500.00</td>
      <td class="percentage">14</td>
      <td class="value">123</td>
    </tr>
    <tr data-quantity="402.9009" data-symbol="B23FNS4" data-type="Fund">
      <td>11 Jan 16</td>
      <td>THREADNEEDLE INV UK PROP TST INSTL NET ACC</td>
      <td>1.24097</td>
      <td class="isa-buy-price">£500.00</td>
      <td class="percentage">16%</td>
      <td class="value">123</td>
    </tr>
  </tbody>
</table>