迭代关联数组耗时太长

我有这个JavaScript对象，其中包含城市列表以及状态上的依赖关系详细信息。迭代关联数组耗时太长

var cityList = { 
'1' : ['CITY_CODE_A','City A', '2','11','2'], 
'2' : ['CITY_CODE_B','City B','','11',''], 
'3' : ['CITY_CODE_C','City C', '','11',''] 
}; 
var stateList = { 
'11' : ['STATE_CODE_A', 'State A'], 
'12' : ['STATE_CODE_B', 'State B'], 
'13' : ['STATE_CODE_C', 'State C'], 
'14' : ['STATE_CODE_D', 'State D'] 
};

根据所选择的状态下，键被传递到在城市列表中的值（指数在阵列3元素）的键匹配的功能，并且如果发现形式的<select>一个选项标签。下面是代码：

$.each(cityList, function(key, value) { 
    if(selectedVal == value[3]){ 
    $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">' +value[1] + '</option>'); 
    } 
});

现在，当这个城市的名单长到50K记录（2 MB）WIZ的状态有50K个城市（性能测试）上面的代码需要2分钟加载Windows上的城市列表下拉列表7机器在本地运行代码。尝试使用本机for/in -loop，但没有得到满意的结果。

关于如何减少时间的任何想法？我是否需要更改JS对象结构？

来源

2013-09-26 kanika

一次在这么多的记录上工作将需要大量的资源....如果你想支持这么多的记录，你需要检查分页解决方案 –

你是动态创建一个下拉菜单与50K选项？即使它瞬间发生，那么做什么呢？ – Jon

@ArunPJohny - 基于分页的解决方案在这里无法正常工作，因为在某个操作上需要更改某些内容。名单可能不会那么长，但2分钟的时间来处理这个对象/数组是令人担忧的。 – kanika

-2

编辑：@downvoters，你能解释为什么你认为这是错的吗？但首先尝试运行this test。

如果你想获得城市你可以创建一个地图，状态ID是关键的一个特定的状态，

var cityList = { 
    11 : [ ['CITY_CODE_A','City A', '2','11','2'], ['CITY_CODE_B','City B','','11',''] ], 
    12 : [ ['CITY_CODE_C','City C', '2','12','2'], ['CITY_CODE_D','City D','','12',''] ] 
}

现在你只需要遍历citylist[ selectedVal ]

$.each(cityList[selectedVal], function(key, value) { 
    $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">' +value[1] + '</option>'); 
});

为了优化它还应该避免DOM操作（将<option>元素添加到一个循环中），并缓冲它：

var $selectEl = $('<select />'); 
$.each(cityList[selectedVal], function(key, value) { 
    $selectEl.append('<option value="'+value[0]+'" code="'+key+'">' +value[1] + '</option>'); 
}); 
$selectEl.attr('id', selectid); 
$("select[id='"+selectid+"']").replaceWith($selectEl);

来源

2013-09-26 08:43:16 pawel

这是如何更快地添加超过50,000个选项的？ – Archer

我使**脚本**更快，因为：如果整个列表有50K个选项，则平均需要迭代1K个元素（50K个城市/ 50个州），并且使DOM操作更高效。 – pawel

你在这里做的是绝对*不*在一个循环中避免DOM操作。 – Jon

我也是一个更好地使用搜索而不是50k scrolldown物品的朋友。但是，为了回答你的问题，我会通过提高代码：

var html = ''; 
$.each(cityList, function (key, value) { 
    html += '<option value="' + value[0] + '" code="' + key + '">' + value[1] + '</option>' 
}); 

$("select[id='1']").append(html);

这会加速你的创作option了很多，因为DOM将只在一个时间的变化，在你的例子说，像你不是50K倍。（Short Demo）

来源

2013-09-26 09:20:43 Martin

感谢您的回答...是啊我试了一个帕维尔提到的类似的方式..它已经减少了很大程度上的时间..感谢您的建议:) – kanika

迭代关联数组耗时太长

回答

相关问题