AJAX请求不再指向纠正成功回调方法

Question

说，例如，在我的HTML文件，我有一个表，如下表行的变量，其中{{}}只是变量：

<tr id="{{ object.id }}"> 
    <td class="name">{{ object.name }}</td> 
</tr> 
<tr id="{{ object.id }}"> 
    <td class="name">{{ object.name }}</td> 
</tr> 

然后在我的JavaScript文件我有以下代码：

var rows = document.getElementsByTagName("tr"); 

for (var r = 0; r < rows.length; r++){ 
     var tr = rows[r]; 
     var id = tr.id; 

     $.ajax({ 
      url: "/some-link/" + id, 
      success: function(some_json){ 
       some_json = JSON.parse(some_json); 
       var td = document.createElement("td"); 
       td.innerHTML = some_json; 

       //Problem is the following tr is referring to the last tr in the for loop by the time the AJAX request is complete 
       tr.appendChild(td); 
      } 
     }); 
    } 

结果我得到的是：

<tr id="{{ object.id }}"> 
    <td class="name">{{ object.name }}</td> 
</tr> 
<tr id="{{ object.id }}"> 
    <td class="name">{{ object.name }}</td> 
    <td>SomeJSON from when rows was 0 in the for loop</td> 
    <td>SomeJSON from when rows was 1 in the for loop</td> 
</tr> 

但是，我想要的结果是：

<tr id="{{ object.id }}"> 
    <td class="name">{{ object.name }}</td> 
    <td>SomeJSON from when rows was 0 in the for loop</td> 
</tr> 
<tr id="{{ object.id }}"> 
    <td class="name">{{ object.name }}</td> 
    <td>SomeJSON from when rows was 1 in the for loop</td> 
</tr> 

我知道我可以通过向AJAX请求async: false解决这个问题，但我想保持同步。

任何帮助将不胜感激。

Answer 1

难道这是一个涉及用Javascript关闭的问题吗？如果你在for循环中定义了一个函数并在函数内部赋值，它们将通过成功回调来保留它们的作用域。

的替代（清洁剂/更优雅）的解决方案将重写for循环和函数调用成Array.prototype.forEach()（感谢Jaromanda X）

We are using [] as a shorthand for accessing the Array prototype, and using .call in order to create the scoped function

在函数内的，变量作用域。以前，每个Ajax成功回调引用相同的变量（这是异步请求返回时的变量）

[].forEach.call(rows, function(tr) { 
     var id = tr.id; 

     $.ajax({ 
      url: "/some-link/" + id, 
      success: function(some_json){ 
       some_json = JSON.parse(some_json); 
       var td = document.createElement("td"); 
       td.innerHTML = some_json; 

       tr.appendChild(td); 
      } 
     }); 

});