同时Ajax调用JS返回数据不相关

Question

我试图通过两个不同的ajax调用将字符串放入数组中。然后用名为string的ids创建Divs，并包含来自ajax请求的哪些twitch流的数据。

问题是，由于ajax调用是异步的，所以我很难这样做，以便元素通过第一个ajax调用，然后再进行第二个ajax调用。因此，数组中的元素将在第一个ajax请求完成之前通过第二个ajax请求，并尝试进入尚未创建的div。

为了解决这个问题，我将第二个ajax请求放在第一个ajax请求中，如下所示：

ajax请求{

生成dis的代码

第二个ajax请求}

这似乎使数组中的元素以正确的顺序返回，但是div没有正确地显示来自ajax请求的数据。我注意到，在记录name变量时，数组中似乎只有一个元素被传递到第二个ajax请求。

控制台日志

无论如何，我仍然在学习如何排除故障，所以任何提示都将不胜感激。

这就是它应该看起来的样子

下面是JS，这里有一个指向代码页的链接(如果有帮助的话)：https://codepen.io/mso122591/pen/jxNoBV

$(document).ready(function() {
  var twichUrl = "https://wind-bow.glitch.me/twitch-api";
  var channels = ["ESL_SC2", "freecodecamp", "OgamingSC2"];
  var name = "";
  var name2 = "";
  var logo = "";

  for (i = 0; i < channels.length; i++) {
    twitchUrl =
      "https://wind-bow.glitch.me/twitch-api/channels/" +
      channels[i] +
      "?callback=?";

    twitchUrlStream =
      "https://wind-bow.glitch.me/twitch-api/streams/" +
      channels[i] +
      "?callback=?";

    $.ajax({
      type: "GET",
      url: twitchUrl,
      dataType: "jsonp",
      jsonp: "callback",
      success: function(data) {
        name = data.display_name;
        logo = data.logo;
        console.log('channel data below:')
        console.log(name);


        $("body").append(
          "<div id=" +
          name +
          "Container>" +
          ' <span class ="icon" id =' +
          name +
          "><img src=" +
          data.logo +
          ">" +
          "</span>" +
          '<span class = "status" id = "' +
          name +
          'data"></span>' +
          "</div>"
        );
        $.ajax({
          type: "GET",
          url: twitchUrlStream,
          dataType: "jsonp",
          jsonp: "callback",
          success: function(data) {
            console.log('stream data below:')

            console.log(name);

            if (data.stream === null) {
              $("#" + name + "data").html( 
                " " + 
                '<a target = "_blank" href ="https://www.twitch.tv/' +
                name +
                '">' +
                name +
                "</a>" +
                " is currently offline"
              );
            } else {
              $("#" + name + "data").html(
                " " +
                '<a target = "_blank" href ="https://www.twitch.tv/' +
                data.stream.channel.display_name +
                '">' +
                data.stream.channel.display_name +
                "</a>" +
                " is Streaming: " +
                data.stream.game +
                "-- " +
                data.stream.channel.status
              );
            }
          }
        });
      }
    });
  }
});

Answer 1

解决这一问题的方法之一是承诺。我已经用$.when快速地改进了您的jquery，并修复了您的页面。

您的代码有一些问题。有一个变量没有用var声明，所以它创建了一个全局变量，所以您总是只得到最新的http值。

我使用了"let“关键字来声明变量，并将它们放入for循环中。这将创建一个局部变量，该变量仅在每个循环中有效，且未被写入。for循环使用反变量"i“，该变量也没有声明，因此这也成为一个全局变量。

Objects/Promise

https://api.jquery.com/jquery.when/

$.when(your ajax code)

https://codepen.io/anon/pen/Qrbzqx

这将在一个对象中创建一个具有两个响应的对象。现在可以使用它将HTML写入文档

注意，.then()是在每个http之后触发的