优化JavaScript向下展开代码

我有一个深入的地图在我的网页上，我想优化。 现在我正在加载每个“向下搜索”地图，即使它没有被单击

是一个示例，它显示了在单击状态时如何加载数据。我希望实现这一点

但这是我的代码，如您所见，我正在加载所有深入的JSON，即使没有单击映射。在我的例子中，我只有2个向下钻取选项，但在我的实际问题中，我有15个这样的选项，所以它真的会减慢一点速度

这是我的代码：

// get main map
$.getJSON('json/generate_json_main_map.php', function(data) {

    // get region 1 map
    $.getJSON('json/generate_json_region_1.php', function(first_region) {

        // get region 2 map
        $.getJSON('json/generate_json_region_2.php', function(second_region) {

            // Initiate the chart
            $('#interactive').highcharts('Map', {
                title: {
                    text: ''
                },
                colorAxis: {
                    min: 1,
                    max: 10,
                    minColor: '#8cbdee',
                    maxColor: '#1162B3',

                    type: 'logarithmic'
                },
                series: [{
                    data: data,
                    "type": 'map',
                    name: st_ponudb,
                    animation: {
                        duration: 1000
                    },
                    states: {
                        //highlight barva
                        hover: {
                            color: '#dd4814'
                        }
                    }
                }],
                drilldown: {
                    drillUpButton: {
                        relativeTo: 'plotBox',
                        position: {
                            x: 0,
                            y: 0
                        },
                        theme: {
                            fill: 'white',
                            'stroke-width': 0,
                            stroke: 'white',
                            r: 0,
                            states: {
                                hover: {
                                    fill: 'white'
                                },
                                select: {
                                    stroke: 'white',
                                    fill: 'white'
                                }
                            }
                        }
                    },
                    series: [{
                        id: 'a',
                        name: 'First',
                        joinBy: ['hc-key', 'code'],
                        type: 'map',
                        data: first_region,
                        point: {
                            events: {
                                click: function() {
                                    var key = this.key;
                                    location.href = key;
                                }
                            }
                        }
                    }, {
                        id: 'b',
                        name: 'Second',
                        joinBy: ['hc-key', 'code'],
                        type: 'map',
                        data: second_region,
                        point: {
                            events: {
                                click: function() {
                                    var key = this.key;
                                    location.href = key;
                                }
                            }
                        }
                    }]
                }
            });
        });
    });
});

来自generate_JSON_main_map.php的JSON：

[{"drilldown":"a","name":"region 1","value":"1","path":""},{"drilldown":"b","name":"region 2","value":"2","path":""}]

来自generate_JSON_region_1.php的JSON：

[{"name":"Place 1","key":"place.php?id=1","value":"1","path":""},{"name":"Place 2","key":"place.php?id=2","value":"2","path":""}]

这是我试图使ajax调用并行加载的尝试，但是映射没有加载，我只得到了coloraxis

$(function() {

        $.when($.getJSON('json/generate_json_main_map.php'), $.getJSON('json/generate_json_region_1.php'), $.getJSON('json/generate_json_region_2.php')).done(function(data,first_region,second_region){

                $('#interactive').highcharts('Map', {
                    title: {
                        text: ''
                    },
                    colorAxis: {
                        min: 1,
                        max: 10,
                        minColor: '#8cbdee',
                        maxColor: '#1162B3',

                        type: 'logarithmic'
                    },
                    series: [{
                        data: data,
                        "type": 'map',
                        name: st_ponudb,
                        animation: {
                            duration: 1000
                        },
                        states: {
                            hover: {
                                color: '#dd4814'
                            }
                        }
                    }],
                    drilldown: {
                        drillUpButton: {
                            relativeTo: 'plotBox',
                            position: {
                                x: 0,
                                y: 0
                            },
                            theme: {
                                fill: 'white',
                                'stroke-width': 0,
                                stroke: 'white',
                                r: 0,
                                states: {
                                    hover: {
                                        fill: 'white'
                                    },
                                    select: {
                                        stroke: 'white',
                                        fill: 'white'
                                    }
                                }
                            }
                        },
                        series: [{
                            id: 'a',
                            name: 'First',
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                            data: first_region,
                            point: {
                                events: {
                                    click: function() {
                                        var key = this.key;
                                        location.href = key;
                                    }
                                }
                            }
                        }, {
                            id: 'b',
                            name: 'Second',
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                            data: second_region,
                            point: {
                                events: {
                                    click: function() {
                                        var key = this.key;
                                        location.href = key;
                                    }
                                }
                            }
                        }]
                    }
                });
            });
        }); 

---

我可以看到JSON已加载，firebug没有显示JS错误。

如果要在单击时加载，需要在

单击事件上调用状态数据（而不是在启动时）

就像您的JSFIDLE示例一样：

chart : {
        events: {
            drilldown: function (e) {
// Load you data
// show it with  chart.addSeriesAsDrilldown(e.point, {...});
            }
        }
}


或者，正如@Whymarrh所建议的，您可以并行加载它们（而不是一个接一个地加载），一旦它们都被检索到，就可以计算您的地图

请参阅示例，了解如何在所有ajax调用完成后执行代码。
当您以如下方式加载地图数据时：

$.when(
    $.getJSON('json/generate_json_main_map.php'),
    $.getJSON('json/generate_json_region_1.php'),
    $.getJSON('json/generate_json_region_2.php')
).done(...);

结果是——当三个请求中的任何一个失败时，所有承诺都将被拒绝，最终，您的地图将永远无法初始化

更好的方法是独立请求所有数据，结果将按如下方式处理：


如果主数据请求失败，则无条件中止其他请求（如果主数据不存在，则无需向下搜索）
如果主数据请求成功，您可以继续并在数据可用时初始化地图。不过，请求向下搜索数据可能成功，也可能失败（但半途而废总比没有好？）。假设一切顺利，那么在用户启动向下钻取操作的情况下，您将显示一条加载消息，并最终在向下钻取系列可用时添加它

下面是我提供的方法的一个实现：

$(function () {        
    // immediately trigger requests for data
    var loadMainData = $.getJSON("json/generate_json_main_map.php");
    var loadRegionData = {
        "region-1-name": $.getJSON("json/generate_json_region_1.php"),
        "region-2-name": $.getJSON("json/generate_json_region_2.php")
    };

    // region drilldown options
    var regionalSeriesOptions = {
        "region-1-name": {
            id: 'a',
            name: 'First',
            joinBy: ['hc-key', 'code'],
            type: 'map',
            point: {
                events: {
                    click: function () {
                        var key = this.key;
                        location.href = key;
                    }
                }
            }
        },
        "region-2-name": {
            id: 'b',
            name: 'Second',
            joinBy: ['hc-key', 'code'],
            type: 'map',
            point: {
                events: {
                    click: function () {
                        var key = this.key;
                        location.href = key;
                    }
                }
            }
        },
        // ...
        "region-(n-1)-name": {
            // series options for region 'n-1'
        },
        "region-n-name": {
            // series options for region 'n'
        },
        "region-(n+1)-name": {
            // series options for region 'n+1'
        }
    };

    // main options
    var options = {
        title: {
            text: ""
        },
        series: [{
                type: "map",
                name: st_ponudb,
                animation: {
                    duration: 1000
                },
                states: {
                    hover: {
                        color: "#dd4814"
                    }
                }
            }],
        events: {
            drilldown: function (e) {
                var regionName, request, series, chart;

                if (e.seriesOptions) {
                    // drilldown data is already loaded for the currently
                    // selected region, so simply return
                    return;
                }

                regionName = e.point.name;
                request = loadRegionData[regionName];
                series = regionalSeriesOptions[regionName];
                chart = this;

                chart.showLoading("Loading data, please wait...");

                request.done(function (data) {
                    // series data has been loaded successfully
                    series.data = data;
                    chart.addSeriesAsDrilldown(e.point, series);
                });

                request.fail(function () {
                    if (loadMainData.readyState !== 4) {
                        // do you really want to cancel main request
                        // due to lack of drilldown data?
                        // Maybe half bread is better than none??
                        loadMainData.abort();
                    }
                });

                // whether success or fail, hide the loading UX notification
                request.always(chart.hideLoading);
            }
        },
        colorAxis: {
            min: 1,
            max: 10,
            minColor: '#8cbdee',
            maxColor: '#1162B3',
            type: 'logarithmic'
        },
        drilldown: {
            drillUpButton: {
                relativeTo: 'plotBox',
                position: {
                    x: 0,
                    y: 0
                },
                theme: {
                    fill: 'white',
                    'stroke-width': 0,
                    stroke: 'white',
                    r: 0,
                    states: {
                        hover: {
                            fill: 'white'
                        },
                        select: {
                            stroke: 'white',
                            fill: 'white'
                        }
                    }
                }
            },
            series: []
        }
    };

    loadMainData.done(function (data) {
        options.series[0].data = data;
        $("#interactive").highcharts("Map", options);
    }).fail(function () {
        Object.keys(loadRegionData).forEach(function (name) {
            // if primary data can't be fetched,
            // then there's no need for auxilliary data
            loadRegionData[name].abort();
        });
    });
});

由于我不知道您代码的每一个细节，您需要找到一种方法将其融入到您的解决方案中。
任何人，有什么建议吗？我没有完全花时间理解此代码，但您不能单击某个区域，发送“id”你可以尝试同时发出这三个请求，这可能会有一点帮助。当你点击地图项目时，你可以调用ajax，比如：@ZetaAl，在我下面的回答中查看我的建议。我的Javascript技能不够好，无法进行“加载od点击”系统，如JSFIDLE中所示。我试图让ajax调用并行运行，但它无法100%运行。检查我编辑的问题。
done（
中的函数是否接收数据（例如，使用
console.log（数据）；console.log（第一个区域）；…
是的，我接收数据。您是否可以将“$”（'interactive'）。highcharts（'Map'），{…`部分放在函数中（带3个参数）然后尝试用两种不同的方法（一种接一种的AJAX方法和并行方法）调用它。我可以给你一个我所做的示例，但我认为这是不正确的，这部分“用两种不同的方法调用它（一种接一种的AJAX方法和并行方法）”我不太明白，你能举个代码示例吗..嗨，我终于有时间测试你的代码..它不工作..当页面刷新时，所有的getJSON都被调用，只有“主映射”出现。如果我单击其他区域，向下搜索不起作用，则单击该区域时不会发生任何事情。@ZetaAl，正如您所理解的，我提供给您的是一个模板，而不是一个真正的代码。请注意，有一些属性名称，如
“区域-（n+1）-name”
和属性值，如
st_ponudb
，我不知道您是否初始化了它们。这个概念是正确的，如果您正确实现它，它应该会工作。我无法控制您的实现，让您的应用程序工作取决于您的努力。祝您好运！谢谢。当然，我知道您只提供了一个模板，以及我知道哪些值和变量应该使用，哪些不应该使用..好吧，我会重新查看代码，也许我会发现一些东西..thx Again同时，你可以制作一个小提琴来展示你的实现，我可以帮助你调试它。很可能有一个triffle错误。但是“它不起作用”这并不能帮助你实现你的目标。相反，陈述你所看到的错误，并多描述一下结果。