【问题标题】：Iterate through the foreach loop array only after the ajax request is successfulajax请求成功后才遍历foreach循环数组
【发布时间】：2018-07-14 02:54:12
【问题描述】：

我想在 ajax 请求成功后仅下一次迭代。

您可以在开发控制台上清楚地看到这里发生了什么。 foreach 循环中有一个 console.log(...); 函数。并且这个条件应该总是正确的。我可以在这两个 AJAX 请求中使用 async: false 来实现此结果，但是它会阻塞 UI。

在我的特殊情况下，它不是一个普通的网页，只是一个项目，我可以这样做，但是，我不想使用它。我需要其他想法。

Console.log(....); 函数在不同时间返回不同的值，但左侧和右侧应该始终是相同的值。

例如：ESL_SC2 == habathcx - 错误，ESL_SC2 == ESL_SC2 - 正确。

打开控制台查看结果。只看JS部分。

$(function() {
  $("html").removeClass("no-js");
  $("#tabs").tabs();
  var xhr = new window.XMLHttpRequest(),
    users = [
      "ESL_SC2",
      "OgamingSC2",
      "cretetion",
      "freecodecamp",
      "storbeck",
      "habathcx",
      "RobotCaleb",
      "noobs2ninjas",
      "mhayia"
    ],
    index,
    ajaxDone,
    userResults = [],
    $search = $("#search"),
    keyCode,
    request;

  var getUserResults = function(callback) {
    index = 0;
    users.forEach(function(e) {
      $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/users/" + e,
        beforeSend: function() {
          ajaxDone = false;
        },
        success: function(d) {

          if (d.display_name !== undefined) {
            userResults[index] = {
              name: d.display_name
            };
            console.log(users[index] + " == " + e);
          }

          index++;

          if (index == users.length) {
            callback();
          }

          ajaxDone = true;
        },
        error: function() {
          alert(
            "AJAX Request failed. Please try again or contact using email n3olukas@gmail.com."
          );
        },
        datatype: "json",
        cache: false
      });
    });
  };

  getUserResults(function() {
    index = 0;
    users.forEach(function(e) {
      $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/streams/" + e,
        success: function(d) {
          if (d.stream !== null) {
            userResults[index].status = d.stream.channel !== undefined ? 'Online' : '';
            userResults[index].title = d.stream.channel !== undefined ? d.stream.channel.status != undefined ? d.stream.channel.status : '' : '';
            userResults[index].url = d.stream.channel !== undefined ? d.stream.channel.url !== undefined ? d.stream.channel.url : '' : '';
          }

          if (userResults[index].name) {
            $('#tabs-1 table').append('<tr><td>' + userResults[index].name + '</td><td>' + (userResults[index].status ?
              'Online' : 'Offline') + '</td><td>' + (userResults[index].title ?
              userResults[index].title : '') + '</td></tr>');
          }

          index++;

          $("body").addClass("loaded");
        },
        error: function() {
          alert(
            "AJAX Request failed. Please try again or contact using email n3olukas@gmail.com."
          );
        },
        datatype: "json",
        cache: false
      });
    });
  });
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: url("https://images8.alphacoders.com/702/702959.jpg");
  background-attachment: fixed;
  background-size: cover;
}

* {
  box-sizing: border-box;
}

.text-center {
  text-align: center;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs a {
  background-color: #f44336;
  width: 33.33%;
  width: calc(100% / 3);
  padding: 10px 0;
  float: left;
}

#search {
  width: 100%;
  height: 3.125rem;
  border: none;
  font-size: 13px;
  color: #4f5b66;
  padding: 0 .9375rem;
}

.three-dots {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

table tr {
  background-color: #f44336;
  color: #fff;
}

tr:first-child {
  background-color: #673ab7;
}

table td {
  padding: 0.625rem 0;
}

:focus {
  outline: 0;
}

.ui-state-active a {
  background-color: #2196f3 !important;
}

footer {
  font-size: 0.85rem;
  margin: 1rem 0;
}

a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.search-results {
  background: #fff;
  margin: 1.5625rem 0;
  border-left: 0.3125rem solid #0ebeff;
  opacity: 0;
  display: none;
}

.search-results h4,
.search-results p {
  margin: 0;
  padding: 0.625rem;
  text-align: left;
}

.search-results a {
  color: #0ebeff;
  display: inline-block;
  margin: 1rem 0;
}

.search-results a:before {
  background-color: #0ebeff;
}

.wikisearch-container {
  width: 65%;
  margin: 2.5rem auto 0;
}


/* Screen loader */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 9.375rem;
  height: 9.375rem;
  margin: -4.6875rem 0 0 -4.6875rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 1.75s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.75s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  right: 0.3125rem;
  bottom: 0.3125rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #f7d130;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 0.9375rem;
  left: 0.9375rem;
  right: 0.9375rem;
  bottom: 0.9375rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #0fff;
  -webkit-animation: spin 1.25s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.25s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

.loaded #loader-wrapper,
.loader-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000428;
  z-index: 1000;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader {
  opacity: 0;
  position: fixed;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.no-js #loader-wrapper {
  display: none;
}


/* Loading animation */


/* Loading animation */

@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  top: 0.59375rem;
  right: 0.9375rem;
  pointer-events: none;
  display: none;
}

.lds-eclipse {
  -webkit-animation: lds-eclipse 1s linear infinite;
  animation: lds-eclipse 1s linear infinite;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0.08rem 0 0 #0ebeff;
}

@media (max-width: 71.875em) {
  .wikisearch-container {
    width: 75%;
  }
}

@media (max-width: 50em) {
  .wikisearch-container {
    width: 85%;
  }
}

@media (max-width: 17.96875em) {
  .wikisearch-container {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="loader-wrapper">
  <div id="loader">
  </div>

  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>
<div class="twitchtv-container text-center">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">All</a></li>
      <li><a href="#tabs-2">Online</a></li>
      <li><a href="#tabs-3">Offline</a></li>
    </ul>
    <input type="text" id="search" placeholder="Search...">
    <div id="tabs-1">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
          <td>Title</td>
        </tr>
      </table>
    </div>
    <div id="tabs-2">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
          <td>Title</td>
        </tr>
      </table>
    </div>
    <div id="tabs-3">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
        </tr>
      </table>
    </div>
  </div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

【问题讨论】：

而不是对用户执行 foreach 循环，而是创建一个传递用户的方法。处理该用户后，您会在列表中捕获下一个用户并在完成 ajax 后再次调用该方法打电话。

标签： javascript jquery ajax loops foreach

【解决方案1】：

删除forEach函数并循环递归调用函数getUserResults()。

看这段代码sn-p

$(function() {
  $("html").removeClass("no-js");
  $("#tabs").tabs();
  var xhr = new window.XMLHttpRequest(),
    users = [
      "ESL_SC2",
      "OgamingSC2",
      "cretetion",
      "freecodecamp",
      "storbeck",
      "habathcx",
      "RobotCaleb",
      "noobs2ninjas",
      "mhayia"
    ],
    index,
    ajaxDone,
    userResults = [],
    $search = $("#search"),
    keyCode,
    request;

  var getUserResults = function(callback, index) {
    //index = 0;
    if (index === users.length) {
      callback();
      return;
    }

    //users.forEach(function(e) {
    $.ajax({
      url: "https://wind-bow.glitch.me/twitch-api/users/" + users[index],
      beforeSend: function() {
        ajaxDone = false;
      },
      success: function(d) {
        if (d.display_name !== undefined) {
          userResults[index] = {
            name: d.display_name
          };
          console.log(users[index] + " == " + users[index]);
        }

        getUserResults(callback, ++index);

        //if (index == users.length) {
        //callback();
        //}

        ajaxDone = true;
      },
      error: function() {
        alert(
          "AJAX Request failed. Please try again or contact using email n3olukas@gmail.com."
        );
      },
      datatype: "json",
      cache: false
    });
    //});
  };

  getUserResults(function() {
    index = 0;
    users.forEach(function(e) {
      $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/streams/" + e,
        success: function(d) {
          if (d.stream !== null) {
            userResults[index].status = d.stream.channel !== undefined ? 'Online' : '';
            userResults[index].title = d.stream.channel !== undefined ? d.stream.channel.status != undefined ? d.stream.channel.status : '' : '';
            userResults[index].url = d.stream.channel !== undefined ? d.stream.channel.url !== undefined ? d.stream.channel.url : '' : '';
          }

          if (userResults[index].name) {
            $('#tabs-1 table').append('<tr><td>' + userResults[index].name + '</td><td>' + (userResults[index].status ?
              'Online' : 'Offline') + '</td><td>' + (userResults[index].title ?
              userResults[index].title : '') + '</td></tr>');
          }

          index++;

          $("body").addClass("loaded");
        },
        error: function() {
          alert(
            "AJAX Request failed. Please try again or contact using email n3olukas@gmail.com."
          );
        },
        datatype: "json",
        cache: false
      });
    });
  }, 0);
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: url("https://images8.alphacoders.com/702/702959.jpg");
  background-attachment: fixed;
  background-size: cover;
}

* {
  box-sizing: border-box;
}

.text-center {
  text-align: center;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs a {
  background-color: #f44336;
  width: 33.33%;
  width: calc(100% / 3);
  padding: 10px 0;
  float: left;
}

#search {
  width: 100%;
  height: 3.125rem;
  border: none;
  font-size: 13px;
  color: #4f5b66;
  padding: 0 .9375rem;
}

.three-dots {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

table tr {
  background-color: #f44336;
  color: #fff;
}

tr:first-child {
  background-color: #673ab7;
}

table td {
  padding: 0.625rem 0;
}

:focus {
  outline: 0;
}

.ui-state-active a {
  background-color: #2196f3 !important;
}

footer {
  font-size: 0.85rem;
  margin: 1rem 0;
}

a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.search-results {
  background: #fff;
  margin: 1.5625rem 0;
  border-left: 0.3125rem solid #0ebeff;
  opacity: 0;
  display: none;
}

.search-results h4,
.search-results p {
  margin: 0;
  padding: 0.625rem;
  text-align: left;
}

.search-results a {
  color: #0ebeff;
  display: inline-block;
  margin: 1rem 0;
}

.search-results a:before {
  background-color: #0ebeff;
}

.wikisearch-container {
  width: 65%;
  margin: 2.5rem auto 0;
}


/* Screen loader */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 9.375rem;
  height: 9.375rem;
  margin: -4.6875rem 0 0 -4.6875rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 1.75s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.75s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  right: 0.3125rem;
  bottom: 0.3125rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #f7d130;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 0.9375rem;
  left: 0.9375rem;
  right: 0.9375rem;
  bottom: 0.9375rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #0fff;
  -webkit-animation: spin 1.25s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.25s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

.loaded #loader-wrapper,
.loader-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000428;
  z-index: 1000;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader {
  opacity: 0;
  position: fixed;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.no-js #loader-wrapper {
  display: none;
}


/* Loading animation */


/* Loading animation */

@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  top: 0.59375rem;
  right: 0.9375rem;
  pointer-events: none;
  display: none;
}

.lds-eclipse {
  -webkit-animation: lds-eclipse 1s linear infinite;
  animation: lds-eclipse 1s linear infinite;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0.08rem 0 0 #0ebeff;
}

@media (max-width: 71.875em) {
  .wikisearch-container {
    width: 75%;
  }
}

@media (max-width: 50em) {
  .wikisearch-container {
    width: 85%;
  }
}

@media (max-width: 17.96875em) {
  .wikisearch-container {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="loader-wrapper">
  <div id="loader">
  </div>

  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>
<div class="twitchtv-container text-center">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">All</a></li>
      <li><a href="#tabs-2">Online</a></li>
      <li><a href="#tabs-3">Offline</a></li>
    </ul>
    <input type="text" id="search" placeholder="Search...">
    <div id="tabs-1">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
          <td>Title</td>
        </tr>
      </table>
    </div>
    <div id="tabs-2">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
          <td>Title</td>
        </tr>
      </table>
    </div>
    <div id="tabs-3">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
        </tr>
      </table>
    </div>
  </div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

看到了吗？现在打印已同步。

【讨论】：

【解决方案2】：

虽然存在“异步迭代”技术，但获取一个又一个用户是发出多个单独请求的缓慢方法。对于这样的情况，并行进行提取会快得多。这就是您当前正在做的事情，但是您已经意识到挑战是以与请求相同的顺序返回响应。这是一个承诺很好解决的问题（使用Promise.all 和fetch）。由于您已经在使用 jQuery，您也可以使用 jQuery 的Deferred objects 和$.when() 来完成它：

var users = [
  "ESL_SC2",
  "OgamingSC2",
  "cretetion",
  "freecodecamp",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas",
  "mhayia"
];

// Transform array of usernames into an array of jQuery deferreds for
// each request. Note that this is actually sending all the requests
// in parallel.
var requests = users.map(function(user) {
  // No need to handle success/failures here, we'll chain those handlers
  // onto the `$.when()` call below.
  return $.ajax({
    url: "https://wind-bow.glitch.me/twitch-api/users/" + user,
    datatype: "json",
    cache: false
  });
});

// Use jQuery.when() to wait for all requests to complete, and provide
// the responses in order (this is the purpose of $.when() or Promise.all()).
// Note that $.when() expects multiple arguments so we need accomodate that
// by spreading our array with Function.prototype.apply(). (This could be
// written more simply in ES2015 as $.when(...requests)).
$.when.apply(null, requests)
  // done() is called after all requests are complete. All responses are
  // passed as arguments in the order the requests were sent.
  .done(function() {
    // Loop through all arguments. Using a `for` loop because built-in
    // `arguments` object isn't a real array, so we can't use
    // arguments.forEach().
    for (var i=0; i<arguments.length; i++) {
      var response = arguments[i];
      // Response is an array, the first element is the user object we want.
      var user = response[0];
      console.log(users[i] + " == " + user.display_name);
    }
  })
  // If any request fails, it will be handled here.
  .fail(function() {
    alert('User request failed.');
  });

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

为了举例，这里有两个使用 Chrome 的开发工具记录的网络瀑布，模拟“快速 3G”速度。并行版本快 5 倍。

并行获取用户在 1 秒内完成：

按顺序获取用户需要 5 秒钟：

【讨论】：

我觉得更快，明天我会深入研究一下。谢谢！
@LukasNaujokaitis 我对我描述的技术与“一次一个请求”方法进行了比较。您可以清楚地看到并行请求的巨大优势。我还在 sn-p 中添加了更多的 cmets。我保持了所有 ES5 兼容，但请注意，使用 ES2015 语法可能会进行一些简化。
为什么我不应该使用...request 语法？我刚刚看了这个页面：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。是的，IE 完全不知道发生了什么：D
真的更快：codepen.io/Kestis500/pen/YeqqNY?editors=0010 :)
@LukasNaujokaitis 正如您所意识到的，并非所有浏览器都支持扩展运算符。您原始问题中的代码没有使用任何 ES2015+ 功能，所以我不想假设它们可用。也就是说，您可以使用像 Babel 这样的转译器来让这段代码在所有浏览器中运行。在 CodePen 上，只需单击 JS 选项卡上的设置齿轮并选择 Babel 作为您的 JavaScript 预处理器。