javascript - .getJSON()中的jQuery text()

This question already has answers here:

$getJSON and for loop issue
                                
                                    （4个答案）
                                
                        
                                3年前关闭。
            
                    
我正在尝试从Pokemon API中获取名称并将其放入html的div字段中，但是当我将文本放入.getJSON函数中时，jQuery的.text（）函数似乎并未将文本放入html中。只是好奇这可能是什么问题？谢谢。

<div class="container">
    <div class="row">
        <div class="col-sm-3" id="1">
            <div id="name1"></div>
        </div>
        <div class="col-sm-3" id="2">
            <div id="name2"></div>
        </div>
        <div class="col-sm-3" id="3">
            <div id="name3"></div>
        </div>
        <div class="col-sm-3" id="4">
            <div id="name4"></div>
        </div>
     </div>
  </div>

JavaScript代码

$(document).ready(function() {
/*Works*/
for(var j = 1; j < 5; j++){
    $("#name" + j).text("HELLO");
}
/*Doesn't work*/
for(var j = 1; j < 5; j++){
    var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + j;
    $.getJSON(webAddress2, function(data) {
        console.log("test");
        $("#name" + j).text("SOME TEXT");
    });
}
});

最佳答案

在循环内创建一个闭包。由于getJSON是异步操作，因此循环将完成其执行，而无需等待getJSON完成每次执行。

您需要将j的值与闭包绑定

$(document).ready(function() {
  for (var j = 1; j < 5; j++) {
    (function(index) {
      var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + index;
      $.getJSON(webAddress2, function(data) {
        console.log("test");
        $("#name" + index).text("SOME TEXT");
      });
    }(j))
  }
});

关于javascript - .getJSON()中的jQuery text()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39115767/