Question

我正在尝试填充数组并在以后使用它。我得到了＃34;未定义＆＃34;当我尝试访问索引中的对象时的结果。

$(document).ready(function() {

  var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];

  var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
  var url = 'https://api.twitch.tv/kraken/';
  var result = {};


  streamers.forEach(function(stream)
  {
    $.getJSON(url + 'streams/' + stream + cb).success(function(data)
    {
        var streaming = (data.stream === null) ? false : true;
        result.push(stream + " - " + streaming);
    });
  });

  alert(result[0]);
  alert(result[1]);
  alert(result[2]);
});

Answer 1

你需要的是callback，因为你为服务器获取的东西主要发生在asynchronous进程中，这意味着代码继续执行，只有在返回某些内容时才会向数组添加内容。您希望脚本仅在完成任务时对事件进行警报，这就是我们称之为回调的原因，因为它将调用传递的函数返回（也就是当它的时候完成）。

$(document).ready(function() {

  var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];

  var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
  var url = 'https://api.twitch.tv/kraken/';
  // This should be initialised as an array, not an object!
  var result = [];
  
  function callback(){
    // I add this line to reduce the amount of alerts
    if(result.length !== 3) return;
    alert(result[0]);
    alert(result[1]);
    alert(result[2]);
  }


  streamers.forEach(function(stream){
    $.getJSON(url + 'streams/' + stream + cb).success(function(data){
        var streaming = (data.stream === null) ? false : true;
        result.push(stream + " - " + streaming);
        callback();
    });
  });
});

Answer 2

$.getJSON是异步的。

在阵列中有数据之前，您的警报正在运行。

要查看可用的数据，请将警报（或更好的是，console.logs）移至成功回调中：

$(document).ready(function() {

    var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
    var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
    var url = 'https://api.twitch.tv/kraken/';
    var result = {};

    streamers.forEach(function(stream) {
        $.getJSON(url + 'streams/' + stream + cb).success(function(data) {
            var streaming = (data.stream === null) ? false : true;
            result.push(stream + " - " + streaming);
            console.log(result);
        });
    });
});

从查看结果转到使用结果，您需要稍微分解一下：

$(document).ready(function() {

    var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
    var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
    var url = 'https://api.twitch.tv/kraken/';
    var result = {};

    var getStreams = streams.map(function (stream) {
        return $.getJSON(url + 'streams/' + stream + cb).success(function(data) {
            var streaming = (data.stream === null) ? false : true;
            result.push(stream + " - " + streaming);
            console.log(result);
        });
    });

    var onResultsSuccess = function (results) {
        console.log("I have all my streams, let's take a look at them:", results);
    };

    var onResultsFail = function () {
        console.log("Something's up!", arguments);
    };

    $.when(getStreams).then(onResultsSuccess, onResultsFail);

});

未经测试，所以假设它是假的！

Answer 3

您正在访问result 之前 $.getJSON回调已被执行。许多这样的问题已经得到了解答，请参阅Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference以解释问题。

您应该利用所有Ajax方法返回promises/deferred objects并使用$.when等待所有这些方法完成的事实：

var deferreds = streamers.map(function(stream) {
  return $.getJSON(url + 'streams/' + stream + cb).then(function(data) {
    var streaming = (data.stream === null) ? false : true;
    return stream + " - " + streaming;
  });
});

$.when.apply(null, deferreds).then(function(result) {
  console.log(result);
});

Answer 4

不仅应该在调用之后将警报推迟到，还不应该在外部循环Ajax。

以下是我的建议

function getStream() {
   if (result.length >= streamers.length) return;
   var stream = streamers[result.length];
   $.getJSON(url + 'streams/' + stream + cb).success(function(data){
     var streaming = (data.stream === null) ? false : true;
     result.push(stream + " - " + streaming);
     getStream();
   });
}
var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
var url = 'https://api.twitch.tv/kraken/';
// This should be initialised as an array, not an object!
var result = [];
$(function() {
  getStream();      
});

访问变量的数组/范围

4 个答案: