javascript/jQuery getJSON非常慢，有一个内循环

javascript/jQuery getJSON very slow with a inner loop

本文关键字：有一个 循环 非常 jQuery getJSON javascript      更新时间：2023-09-26

我使用OpenLayers为图层切换器渲染DOM，大约有1200个div。这个问题可以简化如下。

这是非常快的(3秒左右):

var allLayers = [layerMapnik, layerCycleMap];
for(var ii = 0; ii < 1200; ++ii) {
    console.log("ii = " + ii.toString());
    var groupName = "wms/Transit/railroad/image/" + ii;
    var layName = "CycleMap" + ii.toString();
    var oneLayer = new OpenLayers.Layer.XYZ(layName, "http://whatever/tile/${z}/${y}/${x}", {visibility: false, group:groupName});
    allLayers.push(oneLayer);
}
console.log("adding layers");
map.addLayers(allLayers);
$.getJSON("sampleArray.json", {}, function( doc ) {
    console.log(doc.length);
 });

但是一旦将for循环放入getJson回调中，它就会非常缓慢并且冻结浏览器，即使for循环根本没有读取'doc' !

var allLayers = [layerMapnik, layerCycleMap];
$.getJSON("sampleArray.json", {}, function( doc ) {
    console.log(doc.length);
    for(var ii = 0; ii < 1200; ++ii) {
        console.log("ii = " + ii.toString());
        var groupName = "wms/Transit/railroad/image/" + ii;
        var layName = "CycleMap" + ii.toString();
        var oneLayer = new OpenLayers.Layer.XYZ(layName, "http://whatever/tile/${z}/${y}/${x}", {visibility: false, group:groupName});
        allLayers.push(oneLayer);
    }
    console.log("adding layers");
    map.addLayers(allLayers);
 });

不管json文件有多简单sampleArray.json:

[
  {
    "a": 123,
    "b": 456
  },
  {
    "c": "ccc",
    "d": "ddd"
  } 
]

我是否使用了getJSON或回调错误?还是OpenLayer的东西?

我也试过$。每个代替for循环，没有帮助。

回答自己的问题，供将来参考。

添加LayerSwitcher也应该在回调函数中。因为整个LayerSwitcherdiv应该在添加到主html之前生成，否则在切换器中重新绘制每个添加的图层会减慢速度并冻结浏览器。

另外，使用$。$(document).ready()之外的Ajax调用，以加快速度，因为数据获取不需要等待$(document)

相关文章：