jQuery text（）裏面.getJSON（）

Question

我想從口袋妖怪API獲取名稱並將其放入html中的div字段，但jQuery中的.text（）函數似乎並未放置文本當我把它放在一個.getJSON函數裏面的時候。只是好奇這個問題會是什麼？謝謝。

<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"); 
    }); 
} 
}); 

Answer 1

由於getJSON是成功函數的時間同步是執行的j值是5。沒有編號爲name5的元素，所以什麼都不會發生。使其工作使用closure功能。

$(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; 
 
    (function(j) { 
 
     $.getJSON(webAddress2, function(data) { 
 
     console.log("test"); 
 
     $("#name" + j).text("SOME TEXT"); 
 
     }); 
 
    })(j); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

---

或者用let塊級範圍可變。

$(document).ready(function() { 
 
    /*Works*/ 
 
    for (var j = 1; j < 5; j++) { 
 
    $("#name" + j).text("HELLO"); 
 
    } 
 
    /*Doesn't work*/ 
 
    for (let 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"); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 2

創建環路內閉合。由於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)) 
    } 
});