在$ .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>