Question

我試圖填充數組並在以後使用它的範圍。當我嘗試訪問索引處的對象時，我得到「未定義」結果。

$(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

你不僅應該在來電之後推遲了警惕，你應該不循環阿賈克斯外部..

這裏是我的建議

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();  
});