同时Ajax调用JS返回数据错误

Question

我试图通过两个不同的 ajax 调用将字符串放入数组中。然后使用字符串名称的 id 创建 div，并包含有关从 ajax 请求流式传输哪些 twitch 流媒体的数据。

问题是我正在努力使元素通过第一个 ajax 调用然后通过第二个调用，因为 ajax 调用是异步的。因此，数组中的元素将在第一个请求完成之前通过第二个 ajax 请求，并尝试进入尚未创建的 div。

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

ajax请求{

造成dis

的代码

第二个ajax请求}

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

[控制台日志][1]

无论如何，我仍在学习如何排除故障，因此非常感谢任何提示。

[这是它应该的样子][2]

下面是 JS，这里是 link 代码笔，如果有帮助的话：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

解决这个问题的一种方法是使用 promises。我很快就用 $.when 向你承诺了 jquery，并修复了你的页面。

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

我已经使用 "let" 关键字来声明变量并将它们放在 for 循环中。这将创建一个局部变量，该变量仅在每个循环内有效且不会被覆盖。 for 循环用作计数器变量 "i"，它也未声明，因此它也成为全局变量。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

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

$.when(your ajax code)

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

这将创建一个对象，在一个对象中包含两个响应。您现在可以使用它来将您的 HTML 写入文档

注意 .then() 这些是在每次 http get

之后触发的

同时Ajax调用JS返回数据错误

Simultaneous Ajax Calls JS Returning Data Incorreclty

javascript

ajax

jquery

twitch