undefined-offset - javascript 传输的对象 后变回 undefied

Question

当我从后台中传输json 对象到前端,我打算把它直接传递给使用的变量,然后使用.可是不管我是用对象(lineObjectA) 的graphData属性包住,还是会弹出 graphData is undefied . 而获取不到数据,而且我还遇到了一个现象,当我用firefox 的firedug 一步一步地跟踪时候,它却能正常运行,但只要我已关闭调试工具,依然是现实undeified 数据. 之前我也遇到过类似的问题,是运行顺序,但这次不管我 关闭哪一部,谁先执行还是不行.

---

/**
 * 初始化数据 获得数据.
 * @param dataString 连接地址
 *
 */
function initData_getData() {
    "use strict";
    var sbID = $("#eChart1").attr("sbID");
    var getData;
    $.ajax({
        url: "chart/EquipmentData",
        Type: "GET",
        data: "sbID=" + lineObjectA.SbID + "&chartType=1&UpdateInterval=" + frequent + "&CsID=" + lineObjectA.CsID,
        dataType: "json",
        success: function (jsonData1) {
            getData  =jsonData1;

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {

            clearTimeout(timeTicket);
            chart.showLoading({
                text: "获取不到" + chartName + "数据"
            });
        }
    });
return getData;

}


/**
 * chart控件初始化数据
 * @Param chartName : 要初始化的元素名,
 * @Param unit: 获得单位
 * @Param target 考核指标
 * @Param data 数据
 */

var dataQuantity =35;
function EchartInit() {
    "use strict";
    var graphData =[];
    try{
    var cishu =0;

        graphData =  initData_getData();


    dataQuantity = graphData.length;

        chart.setOption({
            theme: 'default',
            loading: {
                text: "Loading "
            },
            tooltip: {
                trigger: 'axis'
            },
            title: {
                text: lineObjectA.chartName + "图表显示",
                subtext: lineObjectA.unit
            },
            legend: {
                data:[lineObjectA.chartName.toString()]
              },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: true},
                    magicType: {show: true, type: ['line', 'bar']},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,    //是否有前后的空余
                    splitNumber: 50,
                    power: 5,
                    precision: 2,
                    scale: true,
                    data: (function () {
                        var res = [];
                        var lenB =35;

                        for(var i= 0;i<dataQuantity;i++) {

                            console.log("i:"+i+"data:"+graphData[i].dateTime)
                            res.push(graphData[i].dateTime);
                        }
                        return res;
                    })()
                }
            ],
            yAxis: [
                {
                    scale: true,
                    type: 'value',
                    precision: 2,
                    axisLabel: {
                        formatter:'{value}'+lineObjectA.unit
                    }
                }
            ],
            series: [
                {
                    name: lineObjectA.chartName,
                    type: 'line',
                    data: (function () {
                        var res = [];

                        var len =0;
                        len= lineObjectA.graphData.length -1;
                       for(var i=0;i<dataQuantity; i++){
                            res.push(graphData[i].zhi - 0);
                        }
                        return res;
                    })()
                },
                {
                    name:  lineObjectA.chartName + '考核指标',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    data: (function () {
                        var res = [];
                        for(var i=0;i<dataQuantity;i++){
                            res.push(lineObjectA.target);
                        }
                        return res;
                    })()
                }
            ]
        });

    }
    catch(e){
        stopJGrid();
        console.log(e);
        console.log(e.stack);
    }
  //  updateData();
    chart.hideLoading();
}

json代码:

json代码:
[{"dateTime":"2014-12-09 17:04:57","id":179377,"quality":"Good NonSpecific","zhi":23.45347},{"dateTime":"2014-12-09 17:03:58","id":179202,"quality":"Good NonSpecific","zhi":4.858547},{"dateTime":"2014-12-09 17:02:57","id":179027,"quality":"Good NonSpecific","zhi":44.39833},{"dateTime":"2014-12-09 17:01:59","id":178852,"quality":"Good NonSpecific","zhi":15.28367},{"dateTime":"2014-12-09 17:00:58","id":178677,"quality":"Good NonSpecific","zhi":18.86044},{"dateTime":"2014-12-09 16:04:58","id":168877,"quality":"Good NonSpecific","zhi":69.85076},{"dateTime":"2014-12-09 16:03:57","id":168702,"quality":"Good NonSpecific","zhi":43.72997},{"dateTime":"2014-12-09 16:02:58","id":168527,"quality":"Good NonSpecific","zhi":45.94257},{"dateTime":"2014-12-09 16:01:57","id":168352,"quality":"Good NonSpecific","zhi":63.77453},{"dateTime":"2014-12-09 16:00:58","id":168177,"quality":"Good NonSpecific","zhi":12.62246},{"dateTime":"2014-12-09 15:04:00","id":1814,"quality":"100","zhi":22.0069},{"dateTime":"2014-12-09 15:03:00","id":1813,"quality":"100","zhi":20.82888},{"dateTime":"2014-12-09 15:02:00","id":1812,"quality":"100","zhi":53.26395},{"dateTime":"2014-12-09 15:01:00","id":1811,"quality":"100","zhi":51.22837},{"dateTime":"2014-12-09 15:00:00","id":1810,"quality":"100","zhi":86.25446},{"dateTime":"2014-12-09 14:04:00","id":1754,"quality":"100","zhi":90.06317},{"dateTime":"2014-12-09 14:03:00","id":1753,"quality":"100","zhi":47.93542},{"dateTime":"2014-12-09 14:02:00","id":1752,"quality":"100","zhi":61.04922},{"dateTime":"2014-12-09 14:01:00","id":1751,"quality":"100","zhi":21.13102},{"dateTime":"2014-12-09 14:00:00","id":1750,"quality":"100","zhi":33.48796},{"dateTime":"2014-12-09 13:04:00","id":1694,"quality":"100","zhi":25.00992},{"dateTime":"2014-12-09 13:03:00","id":1693,"quality":"100","zhi":7.895138},{"dateTime":"2014-12-09 13:02:00","id":1692,"quality":"100","zhi":1.379437},{"dateTime":"2014-12-09 13:01:00","id":1691,"quality":"100","zhi":63.05734},{"dateTime":"2014-12-09 13:00:00","id":1690,"quality":"100","zhi":67.74499},{"dateTime":"2014-12-09 12:04:00","id":1634,"quality":"100","zhi":18.23176},{"dateTime":"2014-12-09 12:03:00","id":1633,"quality":"100","zhi":70.61067},{"dateTime":"2014-12-09 12:02:00","id":1632,"quality":"100","zhi":45.97308},{"dateTime":"2014-12-09 12:01:00","id":1631,"quality":"100","zhi":15.97949},{"dateTime":"2014-12-09 12:00:00","id":1630,"quality":"100","zhi":67.60155},{"dateTime":"2014-12-09 11:04:00","id":1574,"quality":"100","zhi":62.86508},{"dateTime":"2014-12-09 11:03:00","id":1573,"quality":"100","zhi":82.72347},{"dateTime":"2014-12-09 11:02:00","id":1572,"quality":"100","zhi":44.99039},{"dateTime":"2014-12-09 11:01:00","id":1571,"quality":"100","zhi":35.38316},{"dateTime":"2014-12-09 11:00:00","id":1570,"quality":"100","zhi":67.74804},{"dateTime":"2014-12-09 10:04:00","id":1514,"quality":"100","zhi":41.3007}]

请大神求解或给建议,刚学javascript 不久, 多次遇到undefined 类问题.

Answer 1

你这样获取不到数据的，$.ajax 是一个异步方法，是异步执行的。简单的说，$.ajax发送请求过后，不会等到数据返回就会直接执行下一条语句，即return getData. 这个时候 getData 还没有被赋过值，所以是 undefined。
在 JavaScript 里异步操作非常常见。就拿题主的例子来说，请求数据是要花较长时间的，如果一直等待响应，程序就会一直卡在那里，web 界面也会失去响应。
一般处理这种情况会采取回调的方式，即传入一个回调方法，还获取数据后执行：

function initData_getData(callback) {
    "use strict";
    var sbID = $("#eChart1").attr("sbID");
    var getData;
    $.ajax({
        url: "chart/EquipmentData",
        Type: "GET",
        data: "sbID=" + lineObjectA.SbID + "&chartType=1&UpdateInterval=" + frequent + "&CsID=" + lineObjectA.CsID,
        dataType: "json",
        success: function (jsonData1) {
            callback（jsonData1）;

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {

            clearTimeout(timeTicket);
            chart.showLoading({
                text: "获取不到" + chartName + "数据"
            });
        }
    });
}

回调多了的话代码会显得很混乱。如果遇到这样的情况可以使用 async、promise 等一些流程简化方法。
题主可以搜 JavaScript 异步 找一些资料看看，比如这篇：Javascript异步编程的4种方法