【问题标题】：How to deal with Ajax data not arrive yet?Ajax数据还没到怎么处理？
【发布时间】：2016-09-07 05:19:49
【问题描述】：

我有一个包含

的图表

<script type="text/javascript">

console.log('{{ $cpe_mac }}');

var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {

console.log(data)

var array_hour_g_down = [];
var array_hour_g_up = [];
var array_hour_p_down = [];
var array_hour_p_up = [];

for (var i = 0; i < data.hour_g_up.length; i++) {

    array_hour_g_down[i] = {"value":data.hour_g_down[i]};
    array_hour_g_up[i]   = {"value":data.hour_g_up[i]};
    array_hour_p_down[i] = {"value":data.hour_p_down[i]};
    array_hour_p_up[i]   = {"value":data.hour_p_up[i]};

}

var granular_time_network_day = new FusionCharts({
    "type": "msstackedcolumn2d",
    "renderAt": "granular-time-network",
    "width": "100%",
    "dataFormat": "json",
    "dataSource": {
        "chart": {
            "caption": "Time-Based Bandwidth Usage",
            "subcaption": "Daily View",
            "xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
            "yaxisname": "Bandwidth (in Megabytes)",
            "paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
                    // "numbersuffix": "MB",
                    "showvalues": "0",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "showCanvasBorder": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "valueFontColor": "#ffffff",
                    "showXAxisLine": "1",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",
                    "divLineDashed": "1",
                    "showAlternateHGridColor": "0",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
                },
                "categories": [{
                    "category": [{
                        "label": "12am-2am"
                    }, {
                        "label": "2am-4am"
                    }, {
                        "label": "4am-6am"
                    }, {
                        "label": "6am-8am"
                    }, {
                        "label": "8am-10am"
                    }, {
                        "label": "10am-12pm"
                    }, {
                        "label": "12pm-2pm"
                    }, {
                        "label": "2pm-4pm"
                    }, {
                        "label": "4pm-6pm"
                    }, {
                        "label": "6pm-8pm"
                    }, {
                        "label": "8pm-10pm"
                    }, {
                        "label": "10pm-12am"
                    }]
                }],
                "dataset": [{
                    "dataset": [{
                        "seriesname": "Home Network - Downlink",
                        "data": array_hour_p_down
                    }, {
                        "seriesname": "Home Network - Uplink",
                        "data": array_hour_p_up
                    }]
                }, {
                    "dataset": [{
                        "seriesname": "Guest Network - Downlink",
                        "data": array_hour_g_down
                    }, {
                        "seriesname": "Guest Network - Uplink",
                        "data": array_hour_g_up
                    }]
                }]
            }
        });

});


</script>

我将代码包装在 ajax.done() 周围，因为我不希望我的页面加载等待该数据并在数据到达后立即呈现图表。但现在我面临另一个问题。

Uncaught ReferenceError: granular_time_network_day is not defined

错误

    $('#granular-time').on('click', function() {
        $('#granular-total-view').hide();
        $('#granular-time-view').fadeIn('slow');
        granular_time_network_day.render();
        granular_time_device_day.render();
        $('#btn-interval').prop('disabled', false);
    });

我应该在这里做什么？

如何防止这种情况发生？

我在 Ajax 上做错了吗？

我应该研究一下promise还是类似的东西？

对此的任何提示将不胜感激！

【问题讨论】：

.done() 回调中不需要有函数——我猜想当你点击它时调用还没有完成
而granular_time_network_day 指的是一个你应该这样称呼它的函数：granular_time_network_day().render();
@tonylefler ：我希望你不介意回答你的建议。我一定会接受的。我不确定如何根据您的评论进行调整。
@messerbill : 好的，我会努力的，会及时通知你！
@messerbill ：按照您的建议 granular_time_network_day().render();

标签： javascript jquery ajax charts fusioncharts

【解决方案1】：

您需要在 ajax.done 函数之外定义 grain_time_network_day

【讨论】：

【解决方案2】：

在您的 .done() 回调之外定义函数，这样即使调用尚未完成，点击也会知道它。

编辑

您无需检查函数是否可用，您需要检查并查看是否有来自$.ajax 调用的数据：

var data = null;

$.ajax().done(function(data) {
    // assign data
    data = data;
});

$('#granular-time'.on('click', function() {
    // check to see if you have data
    if (data) {
        // do your stuff
        var granular_time_network_day = new FusionCharts({
        "type": "msstackedcolumn2d",
        "renderAt": "granular-time-network",
        "width": "100%",
        "dataFormat": "json",
            ....
        })
    }
});

});

【讨论】：

【解决方案3】：

我建议在调用 render 之前检查一下 grain_time_network_day 是否存在。

例子：

$('#interval-day').on('click',function(){
    if (granular_time_network_day) {
        granular_time_network_day.render();
    } else {
        //tell user that the data is still being retrieved or handle another way
    }
});

我确实注意到了与在 done 调用中声明的变量相关的潜在其他问题 - grain_time_network_day 将仅在 done 函数的范围内。可以在 done 函数之外声明它，以便在 ajax 调用完成时单击处理程序能够访问它。

【讨论】：

【解决方案4】：

窗口。

原来window. 拯救了我的生命，以及我正在寻找的答案。

这是我的最终脚本

<script type="text/javascript">

var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {

    console.log(data)

    var array_hour_g_down = [];
    var array_hour_g_up = [];
    var array_hour_p_down = [];
    var array_hour_p_up = [];

    for (var i = 0; i < data.hour_g_up.length; i++) {

        array_hour_g_down[i] = {"value":data.hour_g_down[i]};
        array_hour_g_up[i]   = {"value":data.hour_g_up[i]};
        array_hour_p_down[i] = {"value":data.hour_p_down[i]};
        array_hour_p_up[i]   = {"value":data.hour_p_up[i]};

    }

    window.granular_time_network_day = new FusionCharts({
        "type": "msstackedcolumn2d",
        "renderAt": "granular-time-network",
        "width": "100%",
        "dataFormat": "json",
        "dataSource": {
        "chart": {
            "caption": "Time-Based Bandwidth Usage",
            "subcaption": "Daily View",
            "xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
            "yaxisname": "Bandwidth (in Megabytes)",
            "paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
                    // "numbersuffix": "MB",
                    "showvalues": "0",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "showCanvasBorder": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "valueFontColor": "#ffffff",
                    "showXAxisLine": "1",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",
                    "divLineDashed": "1",
                    "showAlternateHGridColor": "0",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
                },
                "categories": [{
                    "category": [{
                        "label": "12am-2am"
                    }, {
                        "label": "2am-4am"
                    }, {
                        "label": "4am-6am"
                    }, {
                        "label": "6am-8am"
                    }, {
                        "label": "8am-10am"
                    }, {
                        "label": "10am-12pm"
                    }, {
                        "label": "12pm-2pm"
                    }, {
                        "label": "2pm-4pm"
                    }, {
                        "label": "4pm-6pm"
                    }, {
                        "label": "6pm-8pm"
                    }, {
                        "label": "8pm-10pm"
                    }, {
                        "label": "10pm-12am"
                    }]
                }],
                "dataset": [{
                    "dataset": [{
                        "seriesname": "Home Network - Downlink",
                        "data": array_hour_p_down
                    }, {
                        "seriesname": "Home Network - Uplink",
                        "data": array_hour_p_up
                    }]
                }, {
                    "dataset": [{
                        "seriesname": "Guest Network - Downlink",
                        "data": array_hour_g_down
                    }, {
                        "seriesname": "Guest Network - Uplink",
                        "data": array_hour_g_up
                    }]
                }]
            }
        });

});


</script>

我不再收到错误消息。

【讨论】：