Warum verursacht diese Schleife einen Stapelüberlauf?

Question

Ich entschied mich, mit jQuery herumzualbern und ein einfaches, auf Axonometrie basierendes Spiel zu erstellen. Es rendert etwas von der Karte und hat dann ein Problem mit dem Stapel. (Maximale Call-Stack-Größe überschritten) Ich verwende nur Hintergrundfarben für die Fliesen für jetzt.

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

In jeder Iteration k klonen Sie 2^k Elemente.

Anstatt ein Element des Klonens, könnte es nur einfacher, ein neues Element jedes Mal zu erstellen:

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

Answer 2

Aufruf $('.map_piece').clone() Klone alle Stücke, die bisher erstellt wurden. Dies verursacht ein exponentielles Wachstum der Anzahl von geklonten Elementen jedes Mal, wenn die Schleife läuft. Um das zu tun, was Sie vorhaben, beschränken Sie den Klon auf nur ein Element, indem Sie first() verwenden.

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