Javascript JS-console.log（..）在for循环中的回调函数之后输出

这是一个Freecodecamp项目（TwitchTV），它显示了多个通道的数据，包括实时流、onlive和all。虽然我可以得到预期的结果（成功显示不同的通道数据），但我无法理解一个问题（因为没有提供社区满意的反馈，所以我在stackoverflow中再次发布了这个问题）。希望它能得到很好的回答

这是我的密码：

var usernames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", 
"storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "MedryBW"];
 var html_all = "";
 var html_live = "";
 var html_offline = "";


$(document).ready(function() {
 console.log("document ready");
 getChannelData();
});


// get JSON data for channels profile 
function getChannelData(i) {
  for (var i = 0; i < usernames.length; i++)
    {
      $.ajax({
         type: 'GET',
 // url: 'https://api.twitch.tv/kraken/channels/twitch/',
 url: 'https://wind-bow.glitch.me/twitch-api/channels/' + usernames[i],
 error: function() {
    console.log("error occurred when getting channel data");
 },
  success: function(data) {
   displayData(data); 
  }       
});
}
console.log("hi");
console.log(html_all);
button_click();
//   $(".data").html(html_all); // no data displayed 
}


 /* function: 
 display the channels list
 */
  function displayData(data){
    var logo = "<img src="+data.logo+" target='_blank' />";
    var name = "  <span style='font-size:20px;'>" + data.display_name +"</span>";
    var url = data.url;
    var status = data.status;
    var baseurl = "<a href=" + url + " target='_blank'>" + logo + name;
    html_all += baseurl+"</a>"+"<br>";
    $(".data").html(html_all);

    console.log('test');
    if (status != null) {
    // live list
    html_live += baseurl + "<p>" + status + "</p></a>" +"<br>";
  }
  else {
  // offline list
  html_offline += baseurl + "</a>"  +"<br>";
  }
 }


 /* function:
 add click event to buttons
 */
 function button_click(){
   $("button.button-all").on("click", function() {
   $(".data").html(html_all);
  // console.log(html_all); // test
  });
   $("button.button-live").on("click", function() {
   $(".data").html(html_live);
  });
  $("button.button-offline").on("click", function() {
  $(".data").html(html_offline);
 }); 
} 

var usernames=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”，
“斯托贝克”、“哈巴萨斯”、“机器人卡莱布”、“Noobs2nijas”、“MedryBW”]；
var html_all=“”；
var html_live=“”；
var html_offline=“”；
$（文档）.ready（函数（）{
控制台日志（“文件准备就绪”）；
getChannelData（）；
});
//获取通道配置文件的JSON数据
函数getChannelData（i）{
对于（var i=0；i”；
$（“.data”）.html（html_all）；
console.log（'test'）；
如果（状态！=null）{
//实时列表
html_live+=baseurl+“”+状态+”
“+”
”；
}
否则{
//脱机列表
html_offline+=baseurl++“
”；
}
}
/*功能：
将单击事件添加到按钮
*/
功能按钮\u单击（）{
$（“button.button all”）。在（“单击”，函数（）上）{
$（“.data”）.html（html_all）；
//console.log（html_all）；//测试
});
$（“button.button live”）。打开（“单击”，函数（）{
$（“.data”）.html（html_live）；
});
$（“button.button脱机”）。打开（“单击”，函数（）{
$（“.data”）.html（html_脱机）；
}); 
} 

---

我的问题：在定义的

getChannelData（）

函数中，在

for（）

循环之后，语句

console.log（html\u all）

输出

”

，为空。但是全局变量

html\u all

已经在

for（）

循环之后更新，为什么这里是空的。但随后函数

按钮\u click（）

按预期工作。如果您在中打开我的源代码，所有按钮都可以正常工作。我不明白，如果

html\u all

在

for

循环后仍然为空，为什么变量

html\u all

的值可以在

按钮单击（）中访问？回调函数
$.ajax（{…success:function（）
起作用了吗？
我认为问题在于
getChannelData
发出了一个异步的ajax调用。如果您将
console.log（html\u all）
放在
success
回调中，您应该会看到您期望的结果

基本上，在加载文档时，会调用
getChannelData
，但AJAX请求需要时间才能完成；在这段时间内，文档会继续处理脚本，包括
console.log（html\u all）
。AJAX调用完成，并设置了
html\u all
变量，因此
按钮\u单击（）
和其他一切都会工作，就在
console.log（html_all）
语句完成之后。
我认为问题在于
getChannelData
发出一个AJAX调用，这是异步的。如果将
console.log（html_all）
放在
success
回调中，您应该会看到您期望的结果

基本上，在加载文档时，会调用
getChannelData
，但AJAX请求需要时间才能完成；在这段时间内，文档会继续处理脚本，包括
console.log（html\u all）
。AJAX调用完成，并设置了
html\u all
变量，因此
按钮\u单击（）
和其他一切都将正常工作，就在
console.log（html\u all）之后
语句已完成。
ajax

请求在默认情况下异步发送，这意味着请求已发送，代码在继续执行其余逻辑之前不会等待响应。当请求最终返回时，将对其进行评估，以查看请求是否成功以及相应的c然后运行ode（例如，

.success（…）

，

.fail（…）

，等等）

---

因此，这里可能发生的情况是，在

for

循环中触发的所有AJAX请求都已发送，但在

console.log（html\u all）发出之前，它们都尚未收到响应

已到达。这意味着尚未调用

displayData

，因此

html\u all

的值尚未更新，仍然包含初始化为的默认空字符串值。

jQuery

ajax

请求在默认情况下是异步发送的，这意味着该请求被发送出去并返回代码在继续执行其余逻辑之前不会等待响应。当请求最终返回时，将对其进行评估，以查看请求是否成功，然后运行相应的代码（例如，

.success（…）

，

.fail（…）

，等等）

因此，这里可能发生的情况是，在

for

循环中触发的所有AJAX请求都已发送，但在

console.log（html\u all）发出之前，它们都尚未收到响应

已到达。这意味着尚未调用

displayData

，因此

html\u all

的值尚未更新，仍然包含初始化为的默认空字符串值。

请输入