Question

我遇到的问题是$ .getJSON代码段工作正常，并生成一个名为'zippy'的变量。我需要在代码中进一步查看'series：data'下的'zippy'。

我尝试了许多不幸的事情，但我无法让它发挥作用。最简单的方法是在函数（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是异步的。你的代码中发生了什么：

document.ready已触发
调用getJSON并注册回调“function（zippy）” 请注意，getJSON会在不执行回调的情况下立即返回
您尝试使用HighCharts
绘制图表
......几百毫秒后
浏览器发出JSON请求

......几百毫秒后
JSON请求返回数据并触发回调“function（zippy）”
“function（zippy）”

所以你看。问题不是如何“函数（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;
            })()
        }]
    });

Answer 2

您需要将所有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("+++++++++++++++++++++++++++++++++++++");

});

JavaScript变量和传递数据问题

2 个答案: