JavaScript 变量和传递数据问题

Question

我有一个问题，代码的 $.getJSON 段工作正常并生成一个名为“zippy”的变量。我需要在代码中进一步访问“series: data”下的“zippy”。

不幸的是，我已经尝试了很多方法，但无法使其发挥作用。最简单的方法是从 function(zippy) 调用中“返回数据” $.getJSON(jsonUrl,function(zippy) ，但我不知道如何使该数据可用。

$(function() {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        console.log("+++++++++++++++++++++++++++++++++++++");
        var jsonUrl = "http://www.someurl.com/thing.php?callback=?";

        $.getJSON(jsonUrl, function(zippy) {
            for(i = 0; i < zippy.cpmdata.length; i++) {
                console.log("TIMESTAMP: " + zippy.cpmdata[i].timestamp + " AFTER: ");


                zippy.cpmdata[i].timestamp = Date.parse(zippy.cpmdata[i].timestamp).getTime() / 1000;
                //var unixtime  Date.parse(temptime).getTime()/1000

                console.log(" TESST " + zippy.cpmdata[i].timestamp + " \r\n");

            }
        });
        console.log("+++++++++++++++++++++++++++++++++++++");

        var chart;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime(), // current time
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            series: [{
                name: 'Random data',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    console.log("++NEED ACCESS HERE FOR ZIPPY++");
                    console.log(" =============== \r\n");
                    console.log(" FINAL " + zippy.cpmdata[5].timestamp + " \r\n");
                    return data;
                })()
            }]



        }

Answer 1

您的问题是 getJSON 是异步的。您的代码中发生的情况是这样的:

1. document.ready 被触发
2. 调用 getJSON 并注册回调“function(zippy)” 请注意，getJSON 会立即返回，而不执行回调

3. 您尝试使用 HighCharts 绘制图表

   ...几百毫秒后

4. 浏览器发出 JSON 请求

   ...几百毫秒后

5. JSON 请求返回数据并触发 回调“function(zippy)”

6. “function(zippy)”被执行

所以你看。问题不在于“function(zippy)”如何执行，而在于何时执行。因此，您无法在回调函数之外执行想要使用 JSON 请求的返回值的代码。 (实际上你可以，但我们暂时忽略使用 setTimeout 进行轮询或使用同步 ajax)

解决方案是将稍后要运行的所有代码移至回调函数内:

$.getJSON(jsonUrl, function(zippy) {
        for(i = 0; i < zippy.cpmdata.length; i++) {
            console.log("TIMESTAMP: " + zippy.cpmdata[i].timestamp + " AFTER: ");


            zippy.cpmdata[i].timestamp = Date.parse(zippy.cpmdata[i].timestamp).getTime() / 1000;
            //var unixtime  Date.parse(temptime).getTime()/1000

            console.log(" TESST " + zippy.cpmdata[i].timestamp + " \r\n");

        }

        var chart;
        chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            marginRight: 10,
            events: {
                load: function() {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        },
        series: [{
            name: 'Random data',
            data: (function() {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                console.log(" FINAL " + zippy.cpmdata[5].timestamp + " \r\n");
                return data;
            })()
        }]
    });