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

Question

我正在循环 HTML table 并根据从每一行读取的数据执行 $.getJSON() 调用。然后我想从那个 $.getJSON 调用中获取数据并将其插入回读取变量的行。

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

Here's a working jsFiddle with my code

这是 table 我正在读取的数据来自：

<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>

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

$.getJSON() call within $.each() loop not executing in order

javascript

ajax

jquery

getjson