为什么这个循环导致堆栈溢出？

Question

我决定搞乱jquery并制作一个简单的基于轴测图的游戏.它呈现了一些地图,然后有一个堆栈问题.(超出最大调用堆栈大小)我现在只使用tile的背景颜色.

JS Bin在这里

var map = [
  "g","g","g","s","s",
  "g","g","s","s","w",
  "g","g","s","w","w",
  "g","g","s","w","w",
  "g","g","s","w","w"
];
var x = 0;
var y = 0;
var count = 0;
var background;
function init() { $.each( map, function( key, value ) {

    x += 30;
    y += 60;
  if (count > 4){
    x -= 120;
    y -= 360;
    count = 0;
  }
    if (value == "g"){background = "#00ff00";}
    if (value == "w"){background = "#0000ff";}
    if (value == "s"){background = "#ffff00";}

    $('.map_piece').clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});
      count ++;
});
                }

$('document').ready(function(){
 init(); 

});

Answer 1

在每次迭代k中,您克隆2 ^ k个项目.

而不是克隆元素,每次创建一个新元素可能更容易:

$('<div class="map_piece">')
    .appendTo('body')
    .css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});