javascript - 无法通过 ajax 调用获得正确的索引结果

标签 javascript jquery ajax

我试图通过变量 showindex 迭代“streamers”数组，但失败了，它只显示数组的第一个元素“monstercat”和最后一个元素“amazhs”，始终在 chrome 中使用 debug 并在 displayResult 函数中使用 showindex是0和9，不明白为什么。有什么想法吗？

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs'];
$(document).ready(function() {
  var logo = "";
  var channelName = "";
  var showindex = 0;

  streamers.forEach(function(streamer, index) {
    showindex = index;
    $.ajax({
      type: 'GET',
      jsonp: "callback",
      url: 'https://api.twitch.tv/kraken/streams/' + streamer,
      headers: {
        'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx'
      },
      success: displayResult
    });
  });

  function displayResult(data) {
    var outstring = "";
    if (data.stream !== null) {
      channelName = data.stream.channel.display_name;
      logo = data.stream.channel.logo;
    } else {
      logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50";
      channelName = streamers[showindex];
    }
    outstring +=
      "<li class='streamer'>" +
      "<img class='streamer-icon' src='" + logo + "'/>" +
      "<p class='streamer-name'>" +
      "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" +
      "<span class='streamer-status'>" +
      "<i class='fa fa-exclamation'></i></span></li>"
    $("#showBox").append(outstring);
  }
});
ul {
  padding: 0;
  margin: 0;
}

.tab-content {
  border: 1px solid #ddd;
  border-top: none;
}

.streamer {
  list-style-type: none;
  padding: 10px;
}

.streamer-icon {
  width: 50px;
}

.streamer-name {
  display: inline-block;
  margin-left: 10px;
}

.streamer-status {
  float: right;
  padding-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row col-md-4 col-md-offset-4">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a>
      </li>
      <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a>
      </li>
      <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="all">
        <ul id="showBox">
        </ul>
      </div>
      <div class="tab-pane" id="online">
        <ul></ul>
      </div>
      <div class="tab-pane" id="offline">
        <ul></ul>
      </div>
    </div>
  </div>
</div>

最佳答案

这是因为所有调用都是同时发生的，所以立即 showindex = 9 解决这个问题的方法是在 displayResult 中进行增量，尽管它仍然可能出错(但可能性较小)。

您可能可以完全更改代码以使其使用 promise ，这样会更安全。

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs'];
$(document).ready(function() {
  var logo = "";
  var channelName = "";
  var showindex = 0;

  streamers.forEach(function(streamer, index) {
    $.ajax({
      type: 'GET',
      jsonp: "callback",
      url: 'https://api.twitch.tv/kraken/streams/' + streamer,
      headers: {
        'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx'
      },
      success: displayResult
    });
  });

  function displayResult(data) {
    var outstring = "";
    if (data.stream !== null) {
      channelName = data.stream.channel.display_name;
      logo = data.stream.channel.logo;
    } else {
      logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50";
      channelName = streamers[showindex];
    }
    outstring +=
      "<li class='streamer'>" +
      "<img class='streamer-icon' src='" + logo + "'/>" +
      "<p class='streamer-name'>" +
      "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" +
      "<span class='streamer-status'>" +
      "<i class='fa fa-exclamation'></i></span></li>"
    $("#showBox").append(outstring);
    showindex++;
  }
});
ul {
  padding: 0;
  margin: 0;
}
.tab-content {
  border: 1px solid #ddd;
  border-top: none;
}
.streamer {
  list-style-type: none;
  padding: 10px;
}
.streamer-icon {
  width: 50px;
}
.streamer-name {
  display: inline-block;
  margin-left: 10px;
}
.streamer-status {
  float: right;
  padding-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row col-md-4 col-md-offset-4">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a>
      </li>
      <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a>
      </li>
      <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="all">
        <ul id="showBox">
        </ul>
      </div>
      <div class="tab-pane" id="online">
        <ul></ul>
      </div>
      <div class="tab-pane" id="offline">
        <ul></ul>
      </div>
    </div>
  </div>
</div>

这是另一种方法，它不使用 foreach 而是以另一种方式迭代数组。这种方式有点慢，但意味着它不会超前(您实际上可以看到每个弹出)

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs'];
$(document).ready(function() {
  var logo = "";
  var channelName = "";
  var showindex = 0;

  //Work out if there are any streamers left in the array
  function calcStreamers() {
    if (showindex < (streamers.length - 1)) {
      //if there are add 1 and go get it
      showindex++;
      streamersGet();
    } else {
      //if not just stop
      return false
    }
  };

  //The get function
  function streamersGet() {
    $.ajax({
      type: 'GET',
      jsonp: "callback",
      url: 'https://api.twitch.tv/kraken/streams/' + streamers[showindex],
      headers: {
        'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx'
      },
      success: displayResult
    });
  };

  function displayResult(data) {
    var outstring = "";
    if (data.stream !== null) {
      channelName = data.stream.channel.display_name;
      logo = data.stream.channel.logo;
    } else {
      logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50";
      channelName = streamers[showindex];
    }
    outstring +=
      "<li class='streamer'>" +
      "<img class='streamer-icon' src='" + logo + "'/>" +
      "<p class='streamer-name'>" +
      "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" +
      "<span class='streamer-status'>" +
      "<i class='fa fa-exclamation'></i></span></li>"
    $("#showBox").append(outstring);
    //Once the data has been added to the page go and check if there are more to add
    calcStreamers();
  }
  //Initally start by getting the first result
  streamersGet();
});
ul {
  padding: 0;
  margin: 0;
}
.tab-content {
  border: 1px solid #ddd;
  border-top: none;
}
.streamer {
  list-style-type: none;
  padding: 10px;
}
.streamer-icon {
  width: 50px;
}
.streamer-name {
  display: inline-block;
  margin-left: 10px;
}
.streamer-status {
  float: right;
  padding-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row col-md-4 col-md-offset-4">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a>
      </li>
      <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a>
      </li>
      <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="all">
        <ul id="showBox">
        </ul>
      </div>
      <div class="tab-pane" id="online">
        <ul></ul>
      </div>
      <div class="tab-pane" id="offline">
        <ul></ul>
      </div>
    </div>
  </div>
</div>

关于javascript - 无法通过 ajax 调用获得正确的索引结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39763186/

上一篇：javascript - HighCharts - 堆积柱形图中的细白线

下一篇：javascript - 如何禁用 Angular 选择 View ？

相关文章：

javascript - jCarouselLite 插件没有按预期工作

javascript - window.AudioContext 和 navigator.getUserMedia 的区别

javascript - 在 Angular 中使用 ngFor 创建织物 Canvas

javascript - 切换无状态 react 组件数组的可见性

jquery - 将 Css 类添加到所有 &lt;input type'text'> 元素？ Javascript/CSS？

javascript - 如何让 Anytime 日期选择器有选择地触发

动态表单中的 jQuery 验证不起作用

ajax - 在某些 AJAX 调用中出现 "net::ERR_BLOCKED_BY_CLIENT"错误

javascript - AJAX promise 调用处理

javascript - Microsoft Azure ROPC Flow 400 错误请求

©2024 IT工具网  联系我们