title: javascript/jQuery getJSON very slow with a inner loop
body: <p>I'm using OpenLayers to render DOM for layerswitcher, with about 1200 divs. The problem can be simplified as follows.</p>
  
  <p>This is very fast (3 seconds or so):</p>
  
  <pre><code>var allLayers = [layerMapnik, layerCycleMap];
  
  for(var ii = 0; ii &lt; 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);
   });
  </code></pre>
  
  <p>But once the for-loop is put inside the getJson callback, it's painfully slow and freezes the browser, even when the for-loop is not reading the 'doc' at all!</p>
  
  <pre><code>var allLayers = [layerMapnik, layerCycleMap];
  
  $.getJSON("sampleArray.json", {}, function( doc ) {
      console.log(doc.length);
      for(var ii = 0; ii &lt; 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);
   });
  </code></pre>
  
  <p>No matter how simple the json file is sampleArray.json:</p>
  
  <pre><code>[
    {
      "a": 123,
      "b": 456
    },
    {
      "c": "ccc",
      "d": "ddd"
    } 
  ]
  </code></pre>
  
  <p>Did I use the getJSON or callback wrong? Or it is an OpenLayer thing?</p>
  
  <p>I also tried $.each instead of for-loop, no help.</p>