读书人
栏目▼

js脚本运行起来卡请教是什么意思

发布时间： 2013-04-07 12:50:11 作者： rapoo

js脚本运行起来卡，请问是什么意思。
现在的问题是：在chrome里面没问题,在FF和IE下就特别卡，请问是怎么回事啊。
JS代码如下:

$(document).ready(function(){


//JobLocation焦点获得
$('#JobLocation').focus(function(){
   $.ajax({
    url: 'http://192.168.170.85:8080/awp/widget/Prefecture!getAll',
    dataType: 'jsonp',
    jsonp:'callback',
    cache:false,
    type:'GET',
    success: function(json) {
    prefectureFilling('geoShow',json.prefectureList);
    $('#geoShow').show();
    }
   });
  });

//向一个div中填充地区列表
    function prefectureFilling(divID,prefectureList){
    $('#'+divID).empty();
    //一最外层div块开头
    var entireDiv='<div id="cityLocation">';
    
    //①①添加提示文字div块
    entireDiv += '<!-- 提示文字 --><div id="cityLocationTit" class="cityListNotice"><span style="line-height:30px;">城市列表</span><span style="float:right"><img src="../image/close1.png" title="关闭" alt="js脚本运行起来卡，请教是什么意思" style="cursor:hand" id="imgClose"/></span></div>';
    //关闭按钮添加悬浮和点击事件
    $('#imgClose').live('mouseover',function(){
    $(this).attr('src','../image/close2.png');
    });
    $('#imgClose').live('mouseout',function(){
    $(this).attr('src','../image/close1.png');
    });
    $('#imgClose').live('click',function(){
    $('#'+divID).hide();
    });
    //②添加热点城市div块开头
    entireDiv += '<!-- 热点城市 --><div id="cityHot clearfix">';
    //1-添加热点城市提示文字：热门
    entireDiv += '<span class="hotTSpan">热门:</span>';
    //2-添加详细热点城市ul+li
    entireDiv += '<ul id="cityHotUl">';
    
    //得到热点城市列表
    var hotList = new Array();
    var hID = 0;
    for(var m=0;m<prefectureList.length;m++){
    if('hot' == prefectureList[m].MARK){
    hotList[hID] = prefectureList[m];
    hID++;
    }
    }
    //循环添加热点城市li标签
    for(var i=0;i<hotList.length;i++){
    entireDiv += '<li class="hotCityLi" id="hotCityLi'+i+'" cityName="'+hotList[i].FULLNAME+'" cityID="'+hotList[i].GCODE+'">'+hotList[i].CNNAME+'</li>';
    //给热点城市添加点击事件
    $('#hotCityLi'+i).live('click',function(){
    $('#JobLocation').val($(this).attr('cityName'));
    $('#CompanyLocation').val($(this).attr('cityName'));
    $('#locationID').val($(this).attr('cityID'));
    $('#cityLocation').hide();
    });
    //鼠标悬浮在省份上时
   $('#hotCityLi'+i).live('mouseover',function(){ 
 
   $(this).css({"color":"#009BD8","cursor":"pointer"});
   });
   //鼠标离开在省份上时
   $('#hotCityLi'+i).live('mouseout',function(){
   $(this).css({"color":"black"});
   });
    }
    
    //②添加热点城市div块结尾
    entireDiv += '</ul></div>';
    
    //③添加其他城市div块开头
    entireDiv += '<!-- 热点城市 --><div id="cityHot clearfix">';
    
    //1-添加其他城市提示文字：其他
    entireDiv += '<span class="hotTSpan">其他:</span>';
    //2-添加详细其他城市div
    entireDiv += '<div class="provinceInLine" id="provinceInLine"><!-- 下面显示省份所属的市 -->';
    //得到所有省份列表
    var provinceList = new Array();
    var pID = 0;
    for(var i=0;i<prefectureList.length;i++){
    var id = prefectureList[i].GCODE;
    //开头为100
var s1 = id.substring(0,3);
//且不是直辖市 即第四位为1,2,3,4
var s2 = id.substring(3,4);
if ("100"==s1 && s2<5) {
continue;
}
if("1"==id.substring(0, 1)){
provinceList[pID] = prefectureList[i];
pID++;
}
    }
    //控制省份索引
    var l = 0;
//省份分为6行
    for(var i=0;i<6;i++){
    //添加每行的5个城市span
    for(var j=0;j<5;j++){
    entireDiv += '<span id="province1" class="provinceStyle"><label id="'+provinceList[l].GCODE+'" pID="'+provinceList[l].GCODE+'">'+provinceList[l].CNNAME+'<img src="../image/arrow_down_black.jpg"/></label></span>';
    l++;
    }
    
    //添加下面所属市县
    l = l-5;
    // cityList索引
    var w = 0;
    for(var p=0;p<5;p++){
    entireDiv += '<div class="cityDetailDiv" cityDetailDivID="'+provinceList[l].GCODE+'" id="cityDetailDiv'+provinceList[l].GCODE+'">';
    
    //根据provinceList[l]这个省得到该省的所有县市
    var tarID = provinceList[l].GCODE.substring(2,4);
    var cityList = new Array();
    for(var t=0;t<prefectureList.length;t++){
    //省份id截取
    var id1 = prefectureList[t].GCODE.substring(2,4);
    //开头为20
var id2 = prefectureList[t].GCODE.substring(0,2);
if(tarID==id1){
//cityList[w] = json.prefectureList[t];
    //将得到的所有县市添加到此div中
    entireDiv += '<span class="citySpan"><label class="cityLabel" id="cityName'+prefectureList[t].GCODE+'" cityName="'+prefectureList[t].FULLNAME+'" cityID="'+prefectureList[t].GCODE+'">'+prefectureList[t].CNNAME+'</label></span>'; 
 
    $('#cityName'+prefectureList[t].GCODE).live('click',function(){
    $('#JobLocation').val($(this).attr('cityName'));
    $('#CompanyLocation').val($(this).attr('cityName'));
    $('#locationID').val($(this).attr('cityID'));
    $('#'+divID).hide();
    });
    //鼠标悬浮在县市上时
    $('#cityName'+prefectureList[t].GCODE).live('mouseover',function(){
    $(this).css({"color":"#009BD8","cursor":"pointer"});
    });
    //鼠标离开在县市上时
    $('#cityName'+prefectureList[t].GCODE).live('mouseout',function(){
    $(this).css({"color":"black"});
    });
w++;
}
    }
    entireDiv += '</div>';
    l++;
    }
    //给每一个省份添加点击事件，点击后展开对应显示区县的div块
    l = l-5;
    for(var y =0;y<5;y++){
    //鼠标悬浮在省份上时
    $('#'+provinceList[l].GCODE).live('mouseover',function(){
    $(this).css({"color":"#009BD8","cursor":"pointer"});
    });
    //鼠标离开在省份上时
    $('#'+provinceList[l].GCODE).live('mouseout',function(){
    $(this).css({"color":"black"});
    });
    //鼠标点击选中省份时
    $('#'+provinceList[l].GCODE).live('click',function(){
    var cityDetailDivList = $('.cityDetailDiv');
    for(var c = 0;c<cityDetailDivList.length;c++){
    var str = cityDetailDivList[c].id.substring(13);
    if($(this).attr('pID') == str){
    cityDetailDivList[c].style.display = 'block';
    }else{
    cityDetailDivList[c].style.display = 'none';
    }
    }
    });
    l++;
    }
    }
    
    //③添加其他城市div块结尾
    entireDiv += '</div></div>';
    
    //④④添加div偏移控制div
    entireDiv += '<div style="clear:both"></div>';
    //一最外层div块结尾
    entireDiv += '</div>';
    $('#'+divID).append(entireDiv);
    }
    
})


页面代码如下:

先不要管样式，点击省份应该显示对应的下辖市的div框。                                javascript                  脚本              
[解决办法]
用一个变量把结果缓存起来，省的每次focus的时候都去加载数据。 
 
var city = null;
    $('#JobLocation').focus(function(){
            if(city){
                prefectureFilling('geoShow',city);
                return;
            }
           $.ajax({
            url: 'http://192.168.170.85:8080/awp/widget/Prefecture!getAll',
            dataType: 'jsonp',
            jsonp:'callback',
            cache:false,
            type:'GET',
            success: function(json) {
                city = json.prefectureList;
                prefectureFilling('geoShow',city);
                $('#geoShow').show();
            }
           });
      });
[解决办法]
把你的所有live方法都去掉。

在最后append了以后，用class样式选择dom绑定事件。

不知道你为什么要用这样的方式进行绑定事件，每个类似i的变量在事件触发后的函数体里也没有用到。就算用到这样写也不对。

没有研究过jquery的源码，不过我想是事件代理到doucment上面，每次触发相应事件的时候去匹配调用了live方法选择器，有就执行对应的方法。

你这样等于给doument重复绑定了N次事件。
读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net