Dlaczego ta pętla powoduje przepełnienie stosu?

Question

Postanowiłem zafałszować przy pomocy jquery i stworzyć prostą grę opartą na aksonometrach. Wykonuje część mapy, a następnie ma problem ze stosem. (Przekroczony maksymalny rozmiar stosu połączeń) Na razie używam tylko kolorów tła dla płytek.

JS Bin Here

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

W każdej iteracji k, klonuje się 2^k przedmiotów.

Zamiast klonowania element, może to być po prostu łatwiej utworzyć nowy element za każdym razem:

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

Answer 2

Wywołanie $('.map_piece').clone() klonów wszystkie kawałki, które zostały utworzone do tej pory. Powoduje to wykładniczy wzrost liczby sklonowanych elementów przy każdym uruchomieniu pętli. Aby zrobić to, co zamierzasz, ogranicz klon tylko do jednego elementu, używając first().

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