优化JavaScript DrillDown代码
栏目: JavaScript · 发布时间: 6年前
内容简介：翻译自：https://stackoverflow.com/questions/32018696/optimize-javascript-drilldown-code
我的页面上有一个钻取地图,我想优化.
现在我正在加载每个“钻取”地图,即使它没有被点击.
Here 是一个示例,显示了在单击状态时如何加载数据.我希望实现这一点.
但这是我的代码,正如你所看到的,即使未点击地图,我也会加载所有向下钻取的jsons.在我的例子中,我只有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;
}
}
}
}]
}
});
});
});
我可以看到jsons已加载,并且firebug没有显示JS错误.
如果要在单击时加载,则需要在click_event上调用状态数据(而不是在启动时).
就像你的JSFiddle例子一样：
chart : {
events: {
drilldown: function (e) {
// Load you data
// show it with chart.addSeriesAsDrilldown(e.point, {...});
}
}
}
或者正如@Whymarrh建议的那样,你可以将它们全部并行加载(而不是一个接一个地加载),一旦它们全部被检索,就可以计算你的地图.
有关如何在所有ajax调用完成后执行代码的示例,请参阅 https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/ .
翻译自：https://stackoverflow.com/questions/32018696/optimize-javascript-drilldown-code
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Flask Web开发：基于Python的Web应用开发实战
[美] Miguel Grinberg / 安道 / 人民邮电出版社 / 2014-12 / 59.00元
本书不仅适合初级Web开发人员学习阅读，更是Python程序员用来学习高级Web开发技术的优秀参考书。 • 学习Flask应用的基本结构，编写示例应用； • 使用必备的组件，包括模板、数据库、Web表单和电子邮件支持； • 使用包和模块构建可伸缩的大型应用； • 实现用户认证、角色和个人资料； • 在博客网站中重用模板、分页显示列表以及使用富文本； • 使用基于......一起来看看 《Flask Web开发：基于Python的Web应用开发实战》 这本书的介绍吧!
