现在尝试着在用jquery做一个异步加载的菜单，采用的JQUERY中的.append()方法动态生成数据，发现cpu的占用率很高，不知道是不是我的代码哪里存在着问题。请各位帮忙看一下。
下面是html代码：
<ul class="node1">
<li>
<a href="#" id="js_parentNode2" onClick="showChildNode('js_parentNode2', 1, 0, 0, 0,'parentNode');">all sports</a>
<ul id="gameCategory"></ul>
</li>
</ul>
下面是js代码：
function showChildNode(menuId, menuLevel, sportsID, leagueID, eventID,className) {
var ul = $("#"+menuId).siblings("ul");
if(ul.is(":visible")){
ul.parent("li").siblings("li").show();
ul.hide();
$("#"+menuId).removeClass(className);
}else{
var action;
if (menuLevel == 1) {
action = "getAllSportCategory.action";
loadSportsCategoryData(action, "", $("#js_data"));
} else if (menuLevel == 2) {
action = "getLeagueBySportCategory.action";
loadLeagueData(action, sportsID, $("#js_data"));
} else if (menuLevel == 3) {
action = "getEventListByLeague.action";
loadEventData(action, sportsID, leagueID, $("#js_data"));
}
if(leagueID != "0"){
if(menuLevel < 2){
$("#"+menuId).parent("li").parent("ul").prev().hide();
}
}
ul.parent("li").siblings("li").hide();
ul.show();
$("#"+menuId).addClass(className);
}
}function loadSportsCategoryData(action,param,obj){
$.ajax({
url:action,
type:"post",
data:{searchSportsID:param},
dataType:"json",
success:function(data){
$("#gameCategory").find("#sportsCategoryLevel").remove();
var html = "";
if(data.length > 0 ){
for (var i=0; i<data.length; i++) {
html += "<li id='sportsCategoryLevel'><a href='#' id='sportsCategory"+data[i].sportsID+"' onClick=showChildNode('sportsCategory"+data[i].sportsID+"',2," + data[i].sportsID +",0,0,'childNode');>"+data[i].sportsName+"</a><ul id='subSportsCategory" + data[i].sportsID +"'></ul></li>";
}
$("#gameCategory").append(html);
html = "";
}
},error:function(data){
alert("系统有误！");
}
});
}function loadLeagueData(action, sportsID, obj) {
$.ajax({
url:action,
type:"post",
data:{searchSportsID:sportsID},
dataType:"json",
success:function(data){
var id = "#subSportsCategory" + sportsID;
$(id).find("#leagueLevel").remove();
var html = "";
if(data.length > 0 ){
for (var i=0; i<data.length; i++) {
html += "<li id='leagueLevel'><a href='#' id='league"+data[i].leagueID+"' onClick=showChildNode('league"+data[i].leagueID+"',3,"+data[i].sportsID+","+data[i].leagueID + ",0,'threeLevelNode');>"+data[i].leagueName+"</a><ul id='subLeague" + data[i].leagueID +"'></ul></li>";
}
$(id).append(html);
html = "";
}
},error:function(data){
alert("系统有误！");
ulLen = 0;
}
});
}function loadEventData(action, sportsID, leagueID, obj){
$.ajax({
url:action,
type:"post",
data:{searchSportsID:sportsID, searchLeagueID:leagueID},
dataType:"json",
success:function(data){
var id = "#subLeague" + leagueID;
$(id).find("#eventLevel").remove();
var html = "";
if(data.length > 0 ){
for (var i=0; i<data.length; i++) {
html += "<li id='eventLevel'><a href='#' id='event"+data[i].eventID+"' onClick=showChildNode('event"+data[i].eventID+"',4," + data[i].leagueID +",0,0,'leafNode');>"+data[i].homeTeamName+" V"+data[i].awayTeamName+"</a><ul id='subEvent" + data[i].leagueID +"'></ul></li>";
}
$(id).append(html);
html = "";
}
},error:function(data){
alert("系统有误！");
}
});
}
问题补充：
非常感谢wangjinpeng，让我的代码又得到了一次提高，但是经过这样的修改，cpu的占用还是没有得到显著提高。请各位帮忙看一下，代码还有什么问题。
下面是我修改过后的js代码：
var nodeHtml = [];
function loadSportsCategoryData(action,param,obj){
$.ajax({
url:action,
type:"post",
data:{searchSportsID:param},
dataType:"json",
success:function(data){
if(data.length > 0 ){
for (var i=0; i<data.length; i++) {
nodeHtml[i] = "<li><a href='#' id='sportsCategory"+data[i].sportsID+"' onClick=showChildNode('sportsCategory"+data[i].sportsID+"',2," + data[i].sportsID +",0,0,'childNode');>"+data[i].sportsName+"</a><ul id='subSportsCategory" + data[i].sportsID +"'></ul></li>";
}
$("#gameCategory").html(nodeHtml.join(''));
nodeHtml = [];
}
},error:function(data){
alert("系统有误！");
}
});
}function loadLeagueData(action, sportsID, obj) {
$.ajax({
url:action,
type:"post",
data:{searchSportsID:sportsID},
dataType:"json",
success:function(data){
var id = "#subSportsCategory" + sportsID;
if(data.length > 0 ){
for (var i=0; i<data.length; i++) {
nodeHtml[i] = "<li><a href='#' id='league"+data[i].leagueID+"' onClick=showChildNode('league"+data[i].leagueID+"',3,"+data[i].sportsID+","+data[i].leagueID + ",0,'threeLevelNode');>"+data[i].leagueName+"</a><ul id='subLeague" + data[i].leagueID +"'></ul></li>";
}
$(id).html(nodeHtml.join(''));
nodeHtml = [];
}
},error:function(data){
alert("系统有误！");
}
});
}
