Question

我是ajax和JavaScript的新手。我想要做的是多次调用一个ajax函数来从资源中获取某些数据，然后推送＆＃34;所有数据都放入一个数组中，以便我以后可以在代码中使用它。这是我的代码。

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

for (i = 0; i < users.length; i++) {
    $.ajax({
        url: "https://api.twitch.tv/kraken/streams/" + users[i],
        success: function(data) {
            arr.push(data);
        },
        error: function(data) {
            arr.push("blank");
        },
        complete: function() {
            if (i == users.length) {
                console.log(arr); //This seem to print even when the condition isn't true
            }
        }
    });
}

代码的问题是，即使i不等于users.length

，它也会打印到控制台

我的问题是;在打印到控制台之前，如何确保它等到i == users.length为真？请记住，我仍然希望这个过程是异步的。

Answer 1

这是因为异步性质。调用ajax回调时，.top:hover * { background-color: yellow; }已经为真。但在你的情况下你可以改变：

i == user.length

为：

if (i == users.length) {

如果回调没有按照启动ajax请求的顺序执行，这也会很好。

Answer 2

以下是如何在不考虑其他请求的情况下调用所有请求而考虑其成功：

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

var runRequests = function(userIndex) {
  if (users.length == userIndex) {
    console.log("runRequests Success", arr);
    return;
  }

  var user = users[userIndex];

  $.ajax({
    url: "https://api.twitch.tv/kraken/streams/" + user,
    success: function(data) {
      arr.push(data);
    },
    error: function() {
      arr.push({});
      console.error("runRequests Error", "user", arguments);
    },
    complete: function() {
      runRequests(++userIndex);
    }
  });
};

runRequests(0);

Working demo

Answer 3

您可以尝试使用async false调用ajax，如下所示

$.ajax({
        type: "GET",
        url: remote_url,
        async: false,
        success : function(data) {
            remote = data;
        }
    });

Answer 4

您可以尝试下面的代码：

var arr = [];
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var currentIndex = 0;
PerformAjax(arr, users, currentIndex);

function PerformAjax(arr, users, currentIndex)
{
    $.ajax({
        url: "https://api.twitch.tv/kraken/streams/" + users[currentIndex],
        success: function(data) {
            arr.push(data);
        },
        error: function(data) {
            arr.push("blank");
        },
        complete: function() {
            currentIndex++;
            if (currentIndex == users.length) {
                console.log(arr); //This seem to print even when the condition isn't true
            }
            else
            {
                PerformAjax(arr,users,currentIndex);
            }
        }
    });
}

Answer 5

使用闭包来指示循环并将其绑定到i

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

for (i = 0; i < users.length; i++) {
(function(x){
 $.ajax({
    url: "https://api.twitch.tv/kraken/streams/" + users[x],
    success: function(data) {
      arr.push(data);
    },
    error: function(data) {
      arr.push("blank");
    },
    complete: function() {
      if (i == users.length) {
        console.log(arr); //This seem to print even when the condition isn't true
      }
    }
  });
})(i)
}

Answer 6

最简单的方法是使用闭包。每当你在循环中有异步时，它都是一样的。

for (var i .....) {
  async(function() {
    use(i);
  }
}

在此伪代码片段中，内部函数捕获i引用的存储位置。循环运行，i递增到它的最终值，然后异步回调开始被调用，所有这些都查找完全相同的位置（而不是值）。

一般解决方案是：

for (var i .....) {
  (function (i) {
    async(function() {
      use(i);
    });
  })(i);
}

即。将循环的全部内容包装在一个自执行的函数中。

这里，外部i的值被传递给包装自执行匿名函数;这个唯一值的位置被异步回调捕获。通过这种方式，每个异步都获得自己的值，在调用自执行函数时确定。

Answer 7

尝试下面的代码，它正常工作。

[M]+(.{2,2})G

请看下面的代码wihout loop和asyns：false，测试工作正常。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var arr = [];
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2","cretetion","freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (i = 0; i < users.length; i++) {
$.ajax({
  url: "https://api.twitch.tv/kraken/streams/" + users[i],
  async: false,
  success: function(data) {
    arr.push(data);
  },
  error: function(data) {
    arr.push("blank");
  },
  complete: function() {

    if (i == (users.length-1)) { 
      console.log(i+'---x--'+users.length); //This seem to print even when the condition isn't true

    }
  }
});
}
</script>

如何在for循环中调用ajax函数

7 个答案: