Bu döngü neden yığın taşmasına neden oluyor?

Question

Jquery ile uğraşmaya ve basit bir aksonometrik harita tabanlı oyun yapmaya karar verdim. Haritanın bir kısmını oluşturuyor, ardından yığınla ilgili bir sorunu var. (Maksimum çağrı yığını boyutu aşıldı) Şimdi fayans için arka plan renkleri kullanıyorum.

$('.map_piece').clone() klon bugüne kadar oluşturulan tüm parçaları çağrılması

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

Her yinelemede k, 2^k öğeleri klonlarsınız.

yerine bir öğe klonlama, sadece yeni bir elemanını her zaman yaratmak daha kolay olabilir:

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

Answer 2

JS Bin Here

. Bu, döngü her çalıştığında klonlanmış elemanların sayısında üssel büyümeye neden olur. Yapmak istediğiniz şeyi yapmak için, klonu first() kullanarak yalnızca bir öğeye sınırlayın.

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