javascript - jQuery每次循环变量数据丢失

Question

我在 jQuery 中的变量作用域遇到了一些问题，如果我在 .each 循环之外执行 console.log，为什么会在 $stockData 上得到一个空数组？ (如果我在 .each 内部执行此操作，它工作得很好，每次添加值时都会记录数组)

$(document).ready(function(){
    // stock data will contain all the merged data from the database and yahoo queries
    var $stockData = new Array();

    // get data from yahoo and merge with dbData, add to stockData array
    $.getJSON( "/get_portfolio.php", function(dbData) {
        $.each( dbData, function(index) {
            var stock = dbData[index]
            $.ajax({
                url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+stock.stock_symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
                crossDomain: true
            }).success(function(data){
                var quote = data.query.results.quote;
                $.extend(quote, stock);
                $stockData.push(quote);
            }); // end success
        });// end each
    }); // end getJSON
    console.log($stockData);
}); // end document.ready

Answer 1

当你打电话时

$.getJSON( "/get_portfolio.php", function(dbData) { ... });

这部分:

函数(dbData) { ... }

不会立即运行。 JavaScript 说:“哦，你做了一个 http 请求？我会保留你给我的这个函数，并在请求完成后运行它”。其余代码将继续运行，因此:

console.log($stockData);

将首先运行。所以这里实际的执行顺序是:

1. 您运行 getJSON
2. console.log 运行
3. HTTP 请求完成并且您的回调运行

将 console.log 放在 getJSON block 内，紧接在 .each 循环之后:

$(document).ready(function(){
    // stock data will contain all the merged data from the database and yahoo queries
    var $stockData = new Array();

    // get data from yahoo and merge with dbData, add to stockData array
    $.getJSON( "/get_portfolio.php", function(dbData) {
        var requestsDone = 0;
        $.each( dbData, function(index) {
            var stock = dbData[index]
            $.ajax({
                url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+stock.stock_symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
                crossDomain: true
            }).success(function(data){
                var quote = data.query.results.quote;
                $.extend(quote, stock);
                $stockData.push(quote);
                if(++requestsDone == dbData.length) done();
            }).error(function(){
                if(++requestsDone == dbData.length) done();
            });
        });// end each
        function done() {
            console.log($stockData); // put this here
        }
    }); // end getJSON

}); // end document.ready