0

我有一个问题，即 $.getJSON 代码段可以正常工作并生成一个名为“zippy”的变量。我需要在代码中进一步访问“系列：数据”下的“zippy”。

不幸的是，我尝试了很多事情，但无法使其正常工作。最简单的方法是从 funcation(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;
                })()
            }]



        }
4

2 回答 2

2

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

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

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

    ... 几百毫秒后

  4. 浏览器发出 JSON 请求

    ... 几百毫秒后

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

  6. “函数（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;
            })()
        }]
    });
于 2012-11-27T21:49:26.720 回答
1

您需要将所有new Highcharts.Chart({...})内容放入getJSON回调中，因为您需要等到 json 请求完成后再创建图表。请参阅我的代码注释CUT AND PASTE chart = new Highcharts.Chart({...}) STUFF HERE!!!。

$(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");

            // CUT AND PASTE chart = new Highcharts.Chart({...}) STUFF HERE!!!

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

});
于 2012-11-27T21:45:43.793 回答